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渐进 式 Web 应 用 (progressive Web app，PWA) 是 现代 Web 应 用 的 一 种 激动 人 心 的 新 形 
式 。 它 利用 了 最 新 的 Web 功能 ， 结 合 了 原生 移动 应 用 的 独特 特性 与 Web 的 优点 ， 为 用 户 
带 来 了 新 的 体验 。 

本 书 将 帮助 你 通过 动手 实践 透彻 地 理解 现代 渐进 式 Web 应 用 开发 。 

你 将 学 习 如 何 利 用 曾经 专属 于 原生 应 用 的 特性 构建 Web 应 用 。 你 将 能 够 通过 推送 通知 联系 
用 户 ， 在 用 户 的 主屏 幕 上 占领 先 机 ， 显 著 地 加 快 网 站 速度 ， 并 且 无 论 用 户 的 网 络 连接 状况 
如 何 ， 都 能 为 其 提供 一 个 全 功能 的 应 用 。 

本 书 采用 动手 实践 的 学 习 方 式 ， 将 一 个 现 有 网 站 逐 章 转化 成 现代 渐进 式 Web 应 用 。 


1 二 

读者 对 象 

本 书 主要 是 为 开发 人 员 准 备 的 。 如 果 你 想 利 用 已 有 的 Web 开发 技能 ， 学 习 如 何 构 建 现代 渐 
进 式 Web 应 用 ， 那 么 本 书 就 是 为 你 而 写 的 。 

本 书 假定 你 至 少 对 使 用 HTML 和 JavaScript 进行 Web 开发 有 基本 的 了 解 ， 但 不 要 求 你 熟悉 
JavaScript 相对 较 新 的 特性 ， 比 如 ECMAScript 2015、promise， 以 及 ECMAScript 2017 的 
异步 函数 。 如 果 你 已 经 了 解 这 些 现代 语言 结构 ， 完 爹 可 以 跳 过 或 快速 浏览 讲解 这 些 内 容 的 
注释 。 

本 书 可 以 帮助 非 技 术 人 员 熟 悉 并 基本 了 解 现代 渐进 式 Web 应 用 的 功能 。 其 中 很 多 章 都 包 
含 了 案例 研究 ， 这 些 案例 是 通过 对 世界 上 最 有 影响 力 的 一 些 网 站 背后 的 团队 进行 访谈 得 到 
的 ， 包括 Twitter 《华盛顿 邮 报 》、Housing.com 和 Lyft。 无 论 你 是 管理 人 员 、 设 计 师 、 产 
品 经 理 ， 还 是 任何 参与 原生 或 Web 应 用 决策 的 其 他 人 员 ， 了 解 如 今 可 能 实现 的 技术 ， 将 有 
助 于 你 更 有 效 地 开展 工作 。 


本 书 内 容 


哥 谭 帝国 酒店 是 本 书 虚 构 的 酒店 ， 它 的 网 站 很 简单 。 阅 读本 书 时 ， 你 将 接管 这 个 网 站 ， 通 
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过 service worker 技术 对 它 进 行 增强 ， 使 其 几乎 可 以 瞬间 加 载 (哪怕 是 在 最 慢 的 连接 状况 
下 )， 并 确保 所 有 的 功能 都 可 以 在 用 户 完全 离线 时 使 用 (包括 查看 用 户 的 预订 ， 甚 至 是 发 
起 新 预订 )。 你 将 学 习 如 何 让 用 户 添 加 一 个 图 标 到 手机 的 主屏 幕 上 ， 并 从 此 处 启动 你 的 渐 
进 式 Web 应 用 。 最 后 ， 为 了 实现 原生 应 用 般 的 体验 ， 你 将 添加 推送 通知 ， 如 此 一 来 ， 就 算 
用 户 离开 你 的 网 站 ， 你 也 能 联系 并 重新 召回 他 们 。 

本 书 还 探讨 了 开发 渐进 式 Web 应 用 时 需要 重点 考虑 的 一 些 因 素 ， 并 专注 于 帮助 你 切实 理 
解 这 些 概念 ， 进 而 成 为 更 高 效 的 开发 人 人员。 此外， 本 书 还 介绍 了 实用 的 开发 工具 、 安 全 因 
素 ， 以 及 service worker 的 生命 周期 。 

虽然 本 书 大 部 分 章节 都 集中 在 通过 动手 实践 进行 学 习 上 ， 但 其 中 两 章 (第 5 章 和 第 11 章 ) 
会 让 你 思考 渐进 式 Web 应 用 提供 的 新 功能 ， 让 你 意识 到 它们 不 仅仅 是 应 用 于 你 的 应 用 的 一 
套 新 技巧 。 

第 5 章 探讨 了 离线 优先 的 Web 应 用 原则 ， 以 这 种 方式 构建 的 现代 Web 应 用 不 会 把 失去 网 
络 连 接 视 为 错误 ， 而 是 能 够 为 之 做 好 计划 并 优雅 地 处 理 。 

第 11 章 探讨 了 渐进 式 Web 应 用 为 用 户 界面 带 来 的 一 些 新 挑战 和 新 机 会 。 渐 进 式 Web 应 用 
改变 了 用 户 对 Web 应 用 的 期 望 。 其 中 一 些 挑战 包括 : 增强 用 户 的 信任 ， 让 他 们 相信 离线 
时 自己 的 数据 不 会 丢失 ;告诉 用 户 离线 时 看 到 的 内 容 可 能 是 几 小 时 之 前 的 ， 并 且 让 用 户 知 
道 无 论 发 生 了 什么 重要 的 变化 ， 应 用 会 发 送 通知 给 他 。 若 应 对 得 当 ， 这 些 挑战 也 是 大 好 时 
机 ， 可 以 借 此 增强 用 户 对 应 用 的 信任 ， 提 高 转化 率 ， 并 在 用 户 的 手机 上 取得 永久 性 位 置 。 
本 书 最 后 介绍 了 一 些 即将 到 来 的 技术 和 训 览 器 API， 它 们 将 进一步 推动 渐进 式 Web 应 用 的 
发 展 。 


排版 约定 

本 书 采用 以 下 排版 约定 。 

。 黑体 
表示 新 术语 或 者 重点 强调 的 内 容 。 

。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 国 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 话 名 
和 关键 字 等 。 

。 等 宽 粗 体 (constant width botLd) 
表示 应 该 由 用 户 输 入 的 命令 或 其 他 文本 。 

。 等 宽 斜 体 (constant width italic) 
表示 应 该 由 用 户 蔡 换 或 取决 于 上 下 文 的 值 。 

































































该 图 标 表 示 渐 进 式 Web 应 用 的 案例 研究 。 





该 图 标 表示 一 般 说 明 。 





该 图 标 表示 从 另 一 个 角度 看 待 同一 问题 。 


该 图 标 表示 警告 或 提醒 。 





代码 示例 


补充 材料 (包括 示例 代码 、 练 习题 等 ) 可 以 从 https://github.com/TalAter/gotham_imperial_ 
hotel 下 载 。 

本 书 旨 在 帮助 你 做 好 工作 。 一 般 来 说 ， 你 可 以 在 程序 和 文档 中 使 用 本 书 的 代码 。 除 非 你 使 用 
了 很 大 一 部 分 代码 ， 否 则 无 须 联系 我 们 获得 许可 。 例 如 ， 使 用 本 书 的 几 段 代码 编写 一 个 程序 
不 需要 获得 许可 ， 销 售 和 分 发 O'Reilly 书 中 示例 的 光盘 则 需要 获得 许可 。 引 用 书 中 示例 代码 
来 回答 问题 无 须 获 得 许可 ， 把 书 中 的 大 量 示例 代码 放 和 你 的 产品 文档 则 需要 获得 许可 。 
我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包 括 书 
名 、 作 者 、 出 版 社 和 ISBN。 例 如 : “Building Progressive Web Apps by Tal Ater (O’Reilly). 
Copyright 2017 Tal Ater, 978-149-196165-0”。 


如 果 你 觉得 自己 对 示例 代码 的 使 用 超出 了 合理 引用 或 者 上 述 许 可 的 范围 ， 请 随时 通 
permissions@oreilly.com 联系 我 们 。 


O'Reilly Safari 


4 Safari (之 前 称 作 Safari Books Online) 一 个 针对 企业 、 政 府 、 教 育 
Safari 者 和 个 人 的 会 出 培训 和 参考 平台 . 

会 员 可 以 访问 来 自 250 多 家 出 版 商 的 上 千 种 图 书 、 培 训 视 频 、 学 习 路 径 、 互 动 式 教程 和 
精 选 播放 列表 ， 这 些 出 版 商 包 括 O'Reilly Media、Harvard Business Review、Prentice Hall 
Professional、 Addison-Wesley Professional、 Microsoft Press、Sams、Que、Peachpit Press、 
































Adobe、Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
Redbooks、 Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、 
Jones & Bartlett、Course Technology 等 。 


要 了 解 更 多 信息 ， 可 以 访问 http://www.oreilly.com/safari。 





联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 


O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 


北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 菜 利 技术 咨询 (北京 ) 有 限 公司 


O’Reilly 的 每 一 本 书 都 有 专属 页 面 ， 你 可 以 在 那里 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
例 以 及 其 他 信息 。! 本 书 的 网 页 地 址 是 : http://shop.oreilly.com/product/0636920052067.do 


对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 : bookquestions@oreilly.com 
要 了 解 更 多 O’Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : http://www. 


oreilly.com 


我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 




































































请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 
我 们 的 YouTube 视频 地 址 如 下 : http://www.youtube.com/oreillymedia 
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第 1 章 


渐进 式 Web 应 用 介绍 





词 是 被 遗忘 的 名 之 浅 影 。 因 为 名 有 力量 ， 所 以 词 也 有 力量 。 词 可 以 点 燃 人 们 心中 
的 火焰 ， 也 可 以 让 最 狠 的 心 流下 眼泪 。 七 个 词 便 可 以 让 一 个 人 爱 上 你 ,十 个 词 便 
可 以 让 最 坚强 的 人 上 顿 失 意志 。 但 是 词 不 过 是 火 之 描绘 ， 而 名 才 是 火 之 本 身 。 


Patrick Rothfuss,《 风 之 名 》 


每 隔 几 年 ，Web 就 会 经 me 在 这 个 时 刻 ， 儿 种 独立 的 技术 相互 碰撞 ， 在 公 
众 中 引起 比 动 。 i 经 诞生 多 年 ， 也 可 能 是 刚刚 获得 浏览 器 支持 的 新 技术 。 但 
对 于 旁观 者 来 说 ， 人 在 一个、 Web 突然 向 前 跃进 了 一 步 。 


Ajax 技术 就 是 这 样 。 它 似乎 是 某 一 天 不 知 从 何 处 突然 蹦 出 来 的 〈 尽 管 很 多 底层 技术 已 经 存 
在 多 年 ， 如 XMLHttpRequest) ， 改 变 了 我 们 对 Web 的 理解 : 一 系列 相互 链接 的 、 大 部 分 是 
静态 的 页 面 。 


Ajax 本 身 只 是 Web 2.0 革命 的 一 部 分 ， 而 Web 2.0 是 另 一 个 强大 的 名 字 ， 它 在 2004 年 从 
天 而 降 ， 一 夜 之 间 引 爆 了 世界 。 


几 年 后 ， 移 动 优 先 (mobile-first) 出 现 了 ， 它 标志 着 我 们 对 Web 开发 的 看 法 发 生 了 转变 。 
通过 给 一 套 设计 原则 命名 ， 这 两 个 单词 获得 了 难以 置信 的 力量 。 只 用 这 两 个 单词 ， 我 们 就 
可 以 大 声 说 ， 用 户 坐 在 台式 机 前 ， 用 20 英寸 的 显示 器 和 一 根 连接 到 墙 上 的 电缆 上 网 的 时 
代 已 经 结束 了 。 这 两 个 单词 让 我 们 明白 ， 是 时 候 改 变 Web 开发 的 方式 了 。 


这 样 的 时 刻 往往 不 是 在 技术 诞生 的 时 候 出 现 的 ， 而 是 在 它 被 命名 的 时 候 。 


名 字 就 是 有 这 样 的 力量 : 它 让 我 们 掌握 新 思想 、 讨 论 新 概念 ， 提 醒 我 们 注意 在 表面 下 酝酿 
的 风暴 。 




































































一 个 同样 巨大 的 转变 正在 发 生 。 幸 运 的 是 ， 它 有 一 个 名 字 。， 


1.1 Web 反 击 战 


渐进 式 Web 应 用 是 一 种 轩 新 的 Web 应 用 ， 它 结合 了 原生 应 用 的 优点 和 Web 少 冲 突 的 
特点 。 


渐进 式 Web 应 用 始 于 简单 的 网 站 ， 但 随 着 用 户 的 使 用 ， 它 不 断 获得 新 的 权限 ， 并 从 网 站 变 
成 一 种 更 像 传统 原生 应 用 的 形式 。 


想象 一 下 ， 你 早上 醒 来 ， 抓 起 手机 ， 浏 览 本 地 列车 公司 的 网 站 。 你 快速 查看 了 上 班 需要 乘 
坐 的 列车 的 时 间 表 ， 然 后 关闭 浏览 器 ， 并 把 手机 放 进口 袋 。 下 班 时 ， 你 再 次 访问 该 网 站 ， 
查看 下 一 直列 车 何 时 发 车 (你 甚至 没有 注意 到 正在 乘坐 的 电梯 没有 手机 信号 ， 因 为 列车 公 
司 的 网 站 依然 在 运行 ， 即 使 你 处 于 离线 状态 )。 次 日 ， 当 你 再 次 访问 该 网 站 时 ， 浏 览 器 询 
间 你 是 否 要 添加 快捷 方式 到 主屏 幕 上 ， 你 欣然 同意 。 当 天 晚 此 时候， 当 你 从 主屏 幕 的 图 标 
登录 该 网 站 时 ， 它 通知 你 ， 由 于 施工 ， 列 车 可 能 会 延误 ， 并 问 你 是 否 想 接收 关于 列车 时 刻 
变化 的 后 续 通知 。 第 三 天 早上 ， 当 你 醒 来 时 ， 手 机 收 到 消息 推送 ， 说 该 列车 会 延误 15 分 
钟 。 你 按 下 亲 钟 上 的 延 时 按钮 ， 又 多 睡 了 一 会 。 

渐进 式 Web 应 用 从 一 个 简单 的 网 站 开始 ， 慢 慢 获 得 新 的 权限 ， 直 到 和 原生 应 用 一 样 ， 而 不 
是 试图 把 你 送 到 应 用 商店 ， 希 望 你 安装 应 用 。 就 这 样 ， 列 车 公司 在 你 的 手机 上 一 步 一 步 训 
得 了 永久 性 的 位 置 。 

这 种 新 的 渐进 增强 模型 ， 取 代 了 只 提供 “安装 ”和 “不 安装 ”两 种 选择 的 原生 应 用 。 渐 进 
式 Web 应 用 能 赢得 用 户 的 信任 ， 并 按 需 获得 新 的 权限 。 

你 可 能 会 问 ， 为 什么 这 是 对 原生 应 用 的 改进 呢 ? 我 们 为 什么 不 坚持 使 用 原生 应 用 呢 ? 好 
吧 ， 除 非 你 是 少数 的 幸运 儿 ， 否 则 你 应 该 知道 ， 原 生 应 用 已 经 行 不 通 了 。 用 户 安装 应 用 的 
可 能 性 在 逐年 减 小 ， 获 取 新 用 户 的 成 本 在 逐渐 增长 ， 留 住 用 户 变 得 越 来 越 困难 。 


1.2 ”当前 的 移动 领域 


当 第 一 款 iPhone 在 2007 年 推出 时 ， 它 的 杀手 级 功能 是 让 你 能 够 在 手机 上 浏览 网 站 。 当 移 
动 应 用 于 一 年 后 诞生 时 ， 开 发 人 员 终 于 能 够 突破 网 页 的 功能 限制 了 (同时 ， 由 于 应 用 商店 
的 引入 ， 也 面临 许多 新 的 限制 )。 

Web 具有 高 级 图 像 技 术 、 地 理 位 置 识别 、 消 息 推送 、 离 线 可 用 性 、 主 屏幕 图 标 等 特性 ， 但 
在 许多 开发 人 员 的 眼中 ，Web 似乎 相形 见 绕 。 原 生 应 用 接管 了 全 球 (和 我 们 的 手机 )。 

但 这 种 趋势 正在 转变 。 虽 然 我 们 在 手机 和 移动 应 用 上 花费 的 时 间 比 以 往 任 何 时 候 都 多 ， 但 
我 们 使 用 的 应 用 却 越 来 越 少 。 用 户 安装 的 应 用 少 了 ， 而 且 只 使 用 其 中 几 个 。 如 果 你 的 应 用 
在 应 用 商店 中 排 在 前 10 位 ， 你 可 能 不 会 有 这 种 困扰 。 但 是 ， 现 在 尝试 将 一 款 新 的 应 用 打 
















































































































































































注 1: 更 确切 地 说 ， 幸 运 的 是 ，Alex Russel 和 Frances Berriman 有 一 天 共 进 晚餐 ， 并 想 出 了 一 个 名 字 。 详 细 
内 容 请 参见 Alex Russel 的 博客 文章 :“Progressive Web Apps: Escaping Tabs Without Losing Our Soul”。 
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入 市 场 几 乎 是 不 可 能 的 ， 成 本 就 更 别提 了 。 

移动 用 户 的 行为 

根据 2016 年 comScore 的 报告 ， 在 移动 设备 上 ， 平 均 每 人 将 84% 的 时 间 花 在 
最 流行 的 5 个 应 用 上 。 抱 歉 ， 这 些 不 是 你 的 应 用 。 在 平板 电脑 上 ， 这 个 比例 
甚至 更 高 ， 用 户 将 95% 的 时 间 花 在 了 这 5 个 应 用 上 。 

该 报告 还 表明 ， 移 动 网 站 比 原生 应 用 更 容易 获得 大 量 用 户 。 拥 有 500 万 以 上 
访问 者 的 移动 网 站 接近 600 个 ， 比 拥有 类 似 受 众 的 原生 应 用 多 4.5 倍 。 排 名 
前 1000 位 的 移动 网 站 拥有 的 用 户 数量 几乎 是 排名 前 1000 位 的 原生 应 用 的 3 
倍 ， 而 且 前 者 的 用 户 增长 速度 是 后 者 的 两 倍 。 






































让 用 户 安装 并 使 用 应 用 ， 如 同 在 一 个 漏斗 形 空间 里 挣扎 求生 。 用 户 需要 知道 你 的 应 用 ( 通 
过 传统 的 在 线 广告 或 你 的 网 站 )， 然 后 必须 访问 其 在 应 用 商店 中 的 页 面 ， 接 下 来 需要 点 击 
安装 。 他 们 需要 同意 授予 应 用 不 同 的 权限 ， 然 后 等 待 应 用 下 载 并 安装 。 最 后 ， 他 们 至 少 要 
启动 一 次 应 用 ， 甚 至 使 用 它 。 

当 用 户 安装 他 们 知道 并 喜欢 的 应 用 (比如 Twitter 或 者 Facebook) 时 ， 这 个 漏斗 看 起 来 并 不 算 
太 糟 糕 。 但 是 大 量 研 究 表明 ， 在 这 个 漏斗 的 每 一 个 环节 ， 平 均 有 20% 的 用 户 丢 失 了 。 应 用 开 
发 人 员 为 广告 点 击 付费 后 ， 发 现 只 有 不 到 20% 的 用 户 实际 启动 了 应 用 ， 这 种 情况 并 不 罕见 。 


网 站 竭尽 所 能 地 让 你 安装 他 们 的 应 用 ， 甚 至 采用 了 一 种 新 的 广告 方式 。 你 肯定 见 过 这 种 广 
告 : 当 你 打开 一 个 网 站 ， 想 看 一 篇 短文 或 者 查询 明天 的 天 气 时 ， 发 现 所 需 信 息 近 在 眼前 ， 
但 是 一 个 横幅 广告 随即 弹 了 出 来 ， 挡 住 了 你 想 看 的 内 容 。 它 问 你 是 否 愿意 安装 一 个 应 用 ， 
而 不 直接 阅读 已 经 在 你 眼前 的 内 容 。 

有 些 人 称 之 为 全 页 间隙 式 广告 (full-page interstitial ad) 。 我 喜欢 一 个 较 短 的 名 字 : 用 力 关 


门 (the door slam， 如 图 1-1 所 示 )。 要 详细 了 解 全 页 间 阶 式 广告 的 作用 与 副作用 ， 请 参见 
附录 B。 
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M/A TEAL :A 
when you can install our app? 


Getiton 
BD Google play 


Continue to mobile site 














图 1-1: 一 种 常见 的 “用 力 关门 ” 式 广 告 
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让 用 户 在 手机 上 安装 你 的 应 用 是 一 场 残酷 、 昂 贵 的 战斗 。 然 而 ， 原 生 应 用 相 较 于 Web 的 优 
势 ， 让 应 用 开发 者 心甘情愿 为 每 一 次 应 用 安装 忍受 痛苦 。 

与 传统 网 站 不 同 ， 原 生 应 用 的 生命 并 不 限于 用 户 首次 发 现 它 到 离开 这 段 短暂 的 时 间 (有 了 时 
候 ， 这 段 时 间 只 有 几 秒 钟 )。 一 旦 安装 ， 原 生 应 用 就 在 你 的 主屏 幕 上 占据 了 永和 久 性 的 位 置 。 
它 可 以 随时 通过 消息 推送 提醒 你 它 的 存在 。 这 让 开发 者 有 很 多 机 会 在 应 用 的 长 生命 周期 里 
尝试 获得 投资 回报 。 
但 随 着 渐进 式 Web 应 用 的 推出 ， 谢 流 终于 开始 转向 了 。 这 些 超 能 力 所 带 来 的 优势 曾经 是 原 
生 应 用 专 有 的 ， 但 现在 可 以 移植 到 Web 应 用 上 了 。 将 这 些 能 力 与 Web 少 冲 突 、 一 步 漏斗 
的 特点 (使 用 点 击 链 接 取 代 安 装 应 用 ) 结合 起 来 ， 你 就 会 明白 为 什么 用 户 、Web 开发 者 和 
企业 都 能 因 拥 抱 渐进 式 Web 应 用 而 获 益 良 多 。 


1.3 ”渐进 式 Web 应 用 的 优势 

随 着 上 述 超 能 力 的 引入 ， 渐 进 式 Web 应 用 实现 了 我 们 寄予 原生 应 用 的 很 多 期 望 。 

以 下 是 本 书 中 将 介绍 的 部 分 优势 。 

无 连接 状态 下 的 可 用 性 
和 传统 网 站 不 同 ， 渐 进 式 Web 应 用 不 依赖 于 用 户 的 连接 状态 。 当 用 户 访问 一 个 渐进 式 
Web 应 用 时 ， 它 会 注册 一 个 service worker (参见 1.4 节 )，service worker 可 以 检测 并 响 
应 用 户 连接 状态 的 变化 。 无 论 用 户 是 离线 、 在 线 ， 还 是 处 于 网 络 不 稳定 状态 ， 它 都 可 以 
提供 完整 的 用 户 体 验 。 

用 户 可 以 在 穿越 大 西洋 的 航班 上 使 用 你 的 渐进 式 Web 应 用 ， 甚 至 可 以 进行 操作 (例如 

发 布 信息 、 回 复 事 件 或 者 评论 文章 )， 用 户 知道 他 的 操作 会 在 网 络 恢复 之 后 立刻 完成 ， 

即便 他 关闭 了 应 用 和 浏览 器 。 详 情 请 参见 第 7 章 。 

渐进 式 Web 应 用 引入 了 一 定 程度 的 可 靠 性 ， 将 用 户 的 信任 程度 提升 到 原本 只 有 原生 应 

用 才能 达到 的 程度 。 用 户 知 道 他 可 以 在 任何 时 间 打 开 WhatsApp 应 用 ， 写 一 条 短信 ， 然 
后 关 掉 手机 ， 而 无 须 担 心 连接 状态 。 到 目前 为 止 ，Web 网 站 还 没 获 得 这 种 信任 ， 这 也 
是 用 户 更 偏向 于 使 用 原生 应 用 的 原因 之 一 。 

加 载 速 度 快 
使 用 service worker， 我 们 可 以 创建 一 个 瞬间 运行 的 网 站 ， 无 论 用 户 的 网 速 极 快 ， 还 是 
使 用 不 可 靠 的 2G 连接 ， 甚 至 是 在 完全 没有 网 络 连接 的 状态 下 。 网 站 可 以 在 几 训 秒 内 加 
载 ， 这 比 过 去 的 Web 要 快 得 多 ， 甚 至 比 原 生 应 用 还 要 快 。 在 第 5 章 中 ， 我 们 将 学 习 如 
何 实现 这 一 点 ， 并 探讨 离线 优先 的 原则 。 

推送 通知 
渐进 式 Web 应 用 可 以 向 用 户 推送 通知 (甚至 是 在 用 户 离 开 网 站 几 天 后 )。 这 些 通知 提供 
了 一 个 好 机 会 ， 让 你 得 以 重新 吸引 用 户 ， 并 提醒 他 们 回 到 应 用 。 渐 进 式 Web 应 用 的 通 
知 是 完全 原生 化 的 ， 和 原生 应 用 的 通知 设 有 区 别 。 参 见 第 10 章 了 解 更 多 关于 推送 通知 
的 内 容 。 
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主屏 幕 快 捷 方 式 
一 旦 用 户 表 现 出 对 渐进 式 Web 应 用 感 兴趣 ， 浏 览 器 就 会 自动 建议 用 户 添加 快捷 方式 到 
主屏 幕 上 一 一 和 原生 应 用 完全 一 致 ( 如 图 1-2 所 示 )。 参 见 第 9 章 ， 了 解 如 何在 用 户 的 
主屏 幕 上 占据 位 置 。 
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图 1-2: 应 用 安装 横 条 


媲美 原生 
渐进 式 web 应 用 从 主屏 幕 启动 的 过 程 可 以 完全 原生 化 ， 和 原生 应 用 相似 。 前 者 在 加 载 
过 程 中 可 以 显示 启动 画面 ， 可 以 以 全 屏 模式 运行 ， 摆 脱 浏览 器 和 手机 系统 的 UI 界面 ， 
其 至 可 以 锁定 屏幕 方向 (这 对 于 游戏 应 用 而 言 至 关 重 要 )。 
参见 第 9 章 了 解 更 多 细 市 。 


Lyft 一 一 平台 越 多 ， 乘 客 越 多 

除了 用 户 体验 方面 的 好 处 之 外 ， 渐 进 式 Web 应 用 也 为 采用 它 的 企业 提供 了 额 
外 的 好 处 。 

Lyft 提供 流行 的 打车 服务 ， 这 家 公司 的 收入 完全 依赖 移动 应 用 。 

在 不 断 努 力 获得 更 多 用 户 的 过 程 中 ，Lyft 公司 发 现 自己 不 得 不 支持 越 来 越 多 
的 设备 和 移动 端 操作 系统 版 本 。 随 着 应 用 的 演进 ，Lyft 不 得 不 放弃 支持 旧版 
本 的 iOS 和 安 卓 系统 ， 否 则 维护 成 本 将 不 断 增长 。Lyft 没有 放弃 这 些 潜在 的 
客户 (占据 了 大 约 8% 的 10S 用 户 和 3% 的 安 卓 用 户 )， 而 是 构建 了 一 个 渐进 
式 Web 应 用 。 

采用 了 渐进 式 Web 应 用 之 后 ，Lyft 团队 成 功 减少 了 支持 多 应 用 和 多 设备 的 技 
术 和 运营 成 本 。 更 重要 的 是 ， 他 们 不 仅 获取 到 了 使 用 iOS 和 安 卓 系统 的 新 用 
户 ， 还 兼顾 了 他 们 以 前 忽略 的 Windows Mobile 和 Amazon Fire 用 户 。 
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1.4 浏览 器 标签 页 、Web 和 service worker 


任何 渐进 式 Web 应 用 的 核心 都 是 service worker 技术 。 

service worker 体现 了 我 们 对 Web 开发 看 法 的 转变 。 我 们 花 几 分 钟 了 解 一 下 这 项 技术 的 定 
位 ， 这 对 于 理解 它 的 潜力 至 关 重 要 。 

在 service worker 出 现 之 前 ， 我 们 的 代码 只 能 在 服务 器 或 者 浏览 器 端 运 行 ， 而 service 
worker 的 出 现 引 入 了 另外 一 层 。 

service worker 是 一 种 脚本 ， 可 以 通过 注册 它 来 控制 你 站 点 中 的 一 个 或 多 个 页 面 。 一 旦 安装 
完毕 ，service worker 就 会 独立 存在 ， 而 不 是 属于 某 个 浏览 器 窗口 或 者 标签 页 。 

service worker 可 以 监听 并 响应 在 其 控制 之 下 的 所 有 页 面 的 事件 。 向 Web 请 求 文件 等 事件 
可 以 被 它 拦截 、 修 改 、 传 递 并 返回 给 页 面 (参见 图 1-3)。 

































































浏览 器 标签 页 














1-3: 浏览 器 标签 页 、Web 和 service worker 的 关系 





这 意味 着 页 面 和 Web 之 间 增 加 了 一 层 ， 它 可 以 响应 请 求 ， 而 无 论 网 络 连接 状态 如 何 。 
service worker 层 甚至 可 以 在 用 户 离线 的 情况 下 正常 工作 。 它 可 以 检测 到 离线 状态 或 者 服务 
器 响应 慢 的 情况 ， 并 返回 缓存 内 容 取而代之 (参见 图 1-4)。 








浏览 器 标签 页 




















1-4: 用 户 离线 时 ， 页 面 与 service worker 进行 通信 


再 进一步 ， 这 意味 着 即使 用 户 关闭 浏览 器 中 运行 着 你 的 应 用 的 所 有 标签 ，service worker 层 
依然 可 以 和 服务 器 通信 (参见 图 1-5)。 它 可 以 接收 并 显示 推送 通知 ， 或 者 确保 任何 用 户 操 
作 都 能 够 被 传递 到 服务 器 (即使 用 户 一 边 走 进 电梯 一 边 进行 操作 ， 并 在 重新 建立 网 络 连 接 
前 关闭 了 应 用 )。 
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图 1-5: 在 用 户 离开 页 面 后 ，service worker 与 服务 器 进行 通信 





现在 你 知道 为 什么 service worker 是 每 一 款 渐 进 式 Web 应 用 的 核心 了 。 它 的 持久 性 让 渐进 
式 Web 应 用 能 够 实现 我 们 对 于 一 款 应 用 的 期 望 。 它 弥补 了 Web 应 用 的 缺失 环节 ， 在 过 去 
只 有 原生 应 用 能 够 做 到 的 事情 ， 现 在 渐进 式 Web 应 用 也 能 做 到 了 。 

但 也 许 service worker 最 大 的 优势 在 于 它 就 是 简 简 单单 的 JavaScript 文件 。 它 的 写法 和 其 他 
JavaScript 代码 一 样 ， 前 端 开发 者 没有 额外 的 语言 学 习 成 本 。 

对 于 开发 者 来 说 ， 若 能 理解 service worker 和 本 书 所 涉及 的 其 他 相关 技术 ， 收 益 将 是 巨大 
的 。 这 些 技术 让 我 们 可 以 利用 现 有 的 Web 技术 ， 包 括 JavaScript、HTML 和 CSS， 编 写 出 
完全 可 以 媲美 甚至 超越 原生 移动 应 用 的 Web 应 用 。 
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第 2 章 
你 的 第 一 个 Service Worker 





2.1 设置 示例 项 目 
本 书 将 通过 动手 实践 的 方式 学 习 渐 进 式 Web 应 用 。 
从 本 章 开 始 ， 我 们 将 接管 一 个 简单 的 Web 应 用 (属于 本 书 虚 构 的 哥 谭 帝 国 酒店 ) ， 并 素 章 


对 其 进行 改善 。 每 一 章 都 会 在 前 一 章 的 基础 上 进行 提升 ， 并 且 在 每 章 的 最 后 ， 你 都 可 以 得 
到 一 个 可 用 的 Web 应 用 。 


到 本 书 结束 时 ， 你 将 把 这 个 简单 的 网 站 变 成 一 个 功能 全 面 的 渐进 式 Web 应 用 。 
为 了 按照 代码 示例 进行 学 习 并 亲自 动手 尝试 ， 你 可 以 把 应 用 的 源 代码 复制 到 你 的 本 地 机 


器 上 。 你 可 以 在 哥 谭 帝国 酒店 的 GitHub 仓库 (https://github.com/TalAter/gotham_imperial_ 
hotel/issues) 中 获取 源 代码 。 


请 注意 ， 为 了 复制 代码 并 在 本 地 运行 ， 你 需要 能 够 在 本 地 机 器 中 运行 Git、Nodejs 和 
NPM。 否 则 ， 你 就 需要 通过 其 他 的 方式 进行 本 书 的 学 习 (例如 从 GitHub 直接 下 载 源 代码 ， 
并 在 远程 服务 器 中 运行 )， 我 并 不 推荐 这 样 做 。 
首先 ， 打 开 你 电脑 中 的 命令 提示 符 〈 控 制 台 ) ， 切 换 到 你 希望 下 载 源 代码 的 目录 ， 并 运行 
以 下 命令 : 

git clone -b ch02-start git@github.com:TalAter/gotham imperial_ hotel.git 


cd gotham imperial_hotel 
npm install 


上 述 命令 会 复制 哥 谭 帝国 酒店 的 Web 应 用 的 源 代码 ， 把 分 支 切 换 到 ch9z-start， 并 安装 运 
行 代码 所 需要 的 依赖 库 。 





















































接 下 来 ， 你 可 以 使 用 下 列 命令 来 启动 一 个 本 地 服务 器 ， 用 浏览 器 打开 你 的 站 点 : 

npm start 
现在 如 果 你 在 浏览 器 中 打开 http:Wlocalhost:8443/， 应 该 能 够 看 到 哥 谭 帝国 酒店 的 Web 应 
用 了 。 














如 果 浏 览 器 中 没有 成 功 加 载 Web 应 用 ， 请 确认 以 下 内 容 。 

。 你 已 经 安装 Git、Node.js 和 NPM， 并 且 可 以 在 命令 行 (例如 macOS 中 的 
Terminal 或 者 iTerm，Windows 的 命令 提示 符 或 者 Cygwin) 中 使 用 它们 。 

。 你 已 经 遵循 了 前 面 所 有 的 步骤 。 

如 果 你 现在 依然 不 能 运行 应 用 ， 请 随时 到 我 们 的 GitHub 问题 跟踪 中 寻求 

帮助 。 











现在 ， 你 可 以 在 自己 喜欢 的 IDE 或 者 编辑 器 中 打开 该 项 目 ， 并 跟随 本 书 将 该 站 点 转换 成 一 
个 渐进 式 Web 应 用 。 
由 于 每 一 章 的 代码 都 建立 在 前 儿童 所 做 的 更 改 之 上 ， 所 以 在 每 一 章 开 始 前 ， 你 的 代码 都 需 
要 包含 之 前 所 有 的 更 改 。 如 果 你 打算 跳 过 本 书 中 的 任何 编码 练习 ， 或 者 整 章 跳 过 ， 则 可 以 
在 命令 行 中 运行 以 下 两 个 命令 ， 将 代码 切换 到 每 章 开头 的 状态 : 
git reset --hard 
git checkout ch04-start 
上 述 命 令 会 重 置 所 有 本 地 已 完成 的 修改 ， 并 把 分 支 切换 到 那 一 章 开始 之 前 的 状态 。 请 确保 
将 第 二 条 命令 中 的 分 支 名 称 更 改 成 当前 所 在 章节 的 名 称 。 例 如 ， 当 你 开始 阅读 第 6 章 的 时 
需 运 行 git checkout ch96-start， 就 可 以 切换 到 包含 前 面 五 章 完 成 的 所 有 更 改 的 分 























i 
~、 


沪 


9 


支 中 。 


KI 2 ET AH N 
2.2 ”欢迎 来 到 哥 谭 帝国 酒店 
本 书 将 通过 虚拟 的 哥 谭 帝国 酒店 的 网 站 这 一 项 目 来 探索 渐进 式 Web 应 用 。 
这 个 简单 的 网 站 包含 两 部 分 : 
(1) 首页 ， 包含 了 酒店 介绍 、 地 图 、 最 近 活 动 列表 ， 以 及 一 个 发 起 新 预订 的 表单 ， 
(2) 个 人 账号 页 面 ， 包 含 了 用 户 的 预订 列表 、 最 近 活 动 ， 以 及 一 个 发 起 新 预订 的 表单 。 
虽然 看 起 来 简单 ， 但 是 这 两 个 页 面 已 经 包含 了 构成 重 内 容 网 站 以 及 类 似 于 原生 应 用 的 Web 
应 用 的 大 部 分 元 素 。 
通过 学 习 本 书 ， 你 就 可 以 把 这 个 简单 的 网 站 变 成 一 个 功能 齐全 的 渐进 式 Web 应 用 。 























挑战 不 同 ， 实 现 方式 各 异 
在 探索 渐进 式 Web 应 用 的 不 同 特性 时 ， 我 们 偶尔 会 从 哥 谭 帝国 酒店 应 用 中 后 
退 一 步 ， 到 一 个 不 同 的 场景 中 探索 相同 的 想法 。 
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虽然 我 们 的 酒店 应 用 更 类 似 于 一 个 传统 的 商务 网 站 ， 但 这 些 注 解 将 从 一 个 更 
类 似 于 传统 原生 应 用 的 应 用 的 角度 探索 相似 的 挑战 。 通 过 探索 这 些 方 法 的 异 
同 ， 我 们 可 以 更 好 地 理解 每 项 特性 是 如 何 适 应 到 不 同 的 项 目 中 的 ， 以 及 不 同 








的 企业 如 何 从 每 项 新 特性 中 获 益 。 


msger 是 我 们 将 在 这 些 注 解 中 探索 的 一 个 虚构 的 消息 应 用 ， 
户 发 送 140 个 字符 的 短 消息 ， 并 能 展示 最 新 的 用 户 消息 流 。 























这 款 应 用 允许 用 
当 新 消息 出 现 的 





时 候 ， 它 会 被 添加 到 消息 流 的 顶部 ， 旧 消息 将 移 到 列表 下 方 ( 见 图 2-1)。 








TIMELINE MENTIONS MESSAGES 


Ran Magen @rmen 

Weputamanonthe moon, and yet we can't 

加 come up with a new analogy for a successful 
achievement except "we put a man on the moon'"? 


Tal Ater arTalAter 

A GitHub issue and pull request template 
generator featuring Chtulhu and Lewis Carroll 
https://www.talater.com/open-source-te... 


Chuck Facts @chuckfacts 
When Alexander Bell invented the telephone he 
had 3 missed calls from Chuck Norris. 


Delicious Israel @Deliciouslsrael 

-| Thiscold and icey summer dessert/drink called 
Falooda is exactly what you want in summer. 
https://www.instagram.com/p/BHNLURMBauD/ 


Type message... 











图 2-1: 我 们 的 示例 消息 应 用 


2.3 熟悉 代码 

在 开始 之 前 ， 我 们 先 来 熟悉 一 下 这 个 应 用 的 基本 代码 结构 。 
项 目 主 目录 中 包含 了 两 个 最 重要 的 目录 。 

public 


包含 了 网 站 的 所 有 客户 端 代码 ， 以 及 运行 代码 所 需 的 其 他 文件 ， 例 如 图 片 和 样式 表 。 


server 


包含 了 运行 网 站 、 跟 踪 预 订 、 发 送 通 知 等 的 服务 端 代码 。 
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本 书 中 的 所 有 编码 练习 只 涉及 public 目录 ,但 是 你 可 能 需要 时 不 时 关注 一 下 server 目录 ， 
特别 是 在 第 10 章 中 。 

写 在 介绍 代码 之 前 

如 果 你 看 看 应 用 代码 的 初始 状态 ， 会 发 现 这 份 代 码 非常 简单 。 为 了 增强 可 读 
性 以 及 清楚 地 展示 我 们 将 学 习 的 关键 原理 ， 代 码 中 有 不 少 地 方 没 有 遵循 最 佳 
实践 ， 甚 至 违背 了 常识 。 

当 你 学 完 本 书 ， 将 有 机 会 大 幅 改进 这 份 代码 。 和 希望 你 不 仅 学 会 了 如 何 从 头 开 
始 构建 一 个 渐进 式 Web 应 用 ， 还 学 会 了 如 何 改进 现 有 的 项 目 ， 将 其 转化 为 
一 个 渐进 式 Web 应 用 。 

本 书 中 没有 使 用 很 多 的 现代 ES2015 语言 结构 ， 这 样 你 就 可 以 专注 在 本 书 的 
主题 上 ， 而 不 是 那些 你 可 能 熟悉 也 可 能 陌生 的 新 语法 。 要 查看 本 书 中 的 代码 
如 何 从 ES2015 中 受益 ， 请 参阅 附录 A。 
































人 PW er 多 
2.4 当前 的 离线 体验 
读 完 上 一 节 后 ， 你 应 该 已 经 拥有 一 份 哥 谭 帝 国 酒 店 Web 应 用 的 代码 副本 ， 以 及 一 个 可 运行 
该 应 用 的 本 地 Web 服务 器 。 
要 确保 你 当前 的 代码 是 处 于 本 章 开 始 时 的 状态 ， 可 以 在 命令 行 中 输入 下 列 命令 : 


git reset --hard 
git checkout ch02-start 


接 下 来 运行 npm start 命令 ， 开 启 一 个 运行 这 个 网 站 的 本 地 Web 服务 器 ， 然 后 在 浏览 器 中 
打开 它 (http://localhost:8443/) ， 你 应 该 就 能 够 看 到 这 个 网 站 的 全 貌 了 (如 图 2-2 所 示 )。 











httpsWwww.gothamimperial.com 


COVIHIANY 


llleeile lle)le 
站 妆 立 位 六 














图 2-2: 哥 谭 帝 国 酒店 首页 





如 今 的 Web 就 如 同 这 个 网 站 ， 内 容 丰 富 、 界 面 美观 、 功 能 实用 。 但 事实 上 ， 这 样 的 Web 
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是 你 从 开发 者 的 角度 看 到 的 。 作 为 开发 者 ， 我 们 经 常会 通过 比较 先进 的 台式 机 、 笔 记 本 电 
脑 或 者 移动 设备 访问 网 站 。 我 们 有 着 可 靠 的 连接 ， 或 者 是 连接 到 本 地 服务 器 ， 或 者 是 连接 
到 一 个 距离 很 近 的 开发 服务 器 。 但 是 ， 用 户 体验 到 的 Web 应 用 可 能 是 完全 不 同 的 。 试 想 ， 
当 用 户 在 离线 的 时 候 访 问 我 们 的 网 站 会 如 何 呢 ( 见 图 2-3) ? 











回 ntiips:/www.gothamimperial.com 


EL 


Unable to connect to the Internet 





More 














图 2-3: 一 位 用 户 在 电梯 中 访问 了 我 们 的 示例 Web 应 用 


不 幸 的 是 ， 对 于 很 多 用 户 来 说 ， 这 才 是 他 们 如 今 使 用 的 Web。 终 于 ，service worker 的 出 现 
让 我 们 有 机 会 处 理 这 种 情况 了 。 

模拟 离线 状态 
在 本 书 使 用 这 个 示例 应 用 的 过 程 中 ， 我 们 经 常 需要 模拟 离线 状态 。 由 于 离线 
状态 的 本 质 是 用 户 无 法 访问 你 的 服务 器 ， 因 此 ， 模 拟 这 种 状态 的 一 种 方法 是 
关闭 你 的 开发 服务 器 。 
在 运行 着 本 地 服务 器 的 命令 行 中 ， 按 下 Ctrl+C 可 以 停止 服务 器 进程 。 接 下 
来 ， 在 浏览 器 中 重新 加 载 应 用 ， 就 可 以 看 到 用 户 离线 访问 的 效果 了 。 
当 你 想 要 重新 “上 线 ” 的 时 候 ， 只 需 再 次 运行 npm start 命令 即 可 。 
这 种 基本 的 方法 在 开发 过 程 中 可 以 很 好 地 模拟 离线 状态 ， 但 是 一 旦 将 代码 发 
布 到 生产 环境 ， 每 当 你 想 进 行 某 项 测试 时 就 “下 线 ” 生 产 服 务 器 ， 这 是 行 不 
通 的 。 所 幸 ， 大 部 分 现代 浏览 器 都 包含 了 用 于 模拟 离线 状态 的 工具 ， 其 至 可 
以 模拟 不 同 的 连接 速度 ( 见 图 2-4)。 详 情 请 参见 4.8 节 。 









































[x 品 Elements Console Sources Network Timeline Profiles Application Security Audits [二 
二 iO 了 了 |View 三 一 Preserve log Disable cache Offline Offline (Oms, Okb/s, Ok| Y 
[F te | 口 Regex Hide data URLs Al XHR JS CSS Img Media Font Doc WS Manifest Other 


| 1000 ms 2000ms 3000ms 4000ms 5000ms 6000 ms 7000ms 











图 2-4: 在 Google Chrome 中 模拟 离线 状态 
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2.5 创建 你 的 第 一 个 service worker 
让 我 们 来 控制 用 户 的 离线 体验 。 
首先 从 当前 页 注册 一 个 新 的 service worker。 打 开 js/app:js 文件 ， 在 文件 开头 添加 如 下 代码 : 


if ("serviceWorker" in navigator) { 
navigator .serviceWorker.register("/serviceworker .js") 
.then(function(registration) { 
console.log("Service Worker registered with scope:", registration.scope); 
}).catch(function(err) { 
console.log("Service worker registration failed:", err); 
]); 
} 


代码 首先 验证 了 当前 浏览 器 是 否 支 持 service worker。 然 后 通过 调用 navigator .serviceWorker. 
register 方法 注册 了 我 们 的 service worker， 这 个 方法 接收 两 个 参数 ， 第 一 个 是 我 们 的 
service worker 脚本 URL， 第 二 个 是 可 选 的 选项 对 象 (这 里 省 略 了 这 个 参数 ， 但 会 在 2.11 
节 探 讨 这 个 问题 )。 

通过 在 使 用 之 前 先 测试 service worker 的 支持 情况 ， 可 确保 不 会 将 使 用 旧 浏 览 器 来 访问 应 
用 的 用 户 排 除 在 外 ， 并 同时 向 使 用 现代 浏览 器 的 用 户 提 供 增强 的 体验 。 这 种 渐进 增强 式 的 
实践 是 构建 这 个 应 用 的 核心 (参见 2.6 节 )。 

上 述 的 register 调用 会 返回 一 个 promise。 如 果 promise 完成 ， 就 意味 着 service worker 成 
功 注册 了 ， 在 then 语句 中 定义 的 函数 就 会 被 调用 。 否 则 ， 如 果 promise 遇 到 任何 问题 ， 就 
会 执行 catch 块 内 定义 的 函数 。 

现在 ， 如 果 你 在 浏览 器 中 刷新 示例 应 用 ， 应 该 会 在 浏览 器 的 控制 台中 看 到 一 条 错误 信息 ， 


1 




















告诉 你 “Service worker registration failed.”。 


service worker 注册 失败 了 ，promise 的 状态 也 因此 失败 ， 因 为 目前 我 们 还 没有 创建 
serviceworker.js 文件 。 

创建 一 个 空 文件 ， 命 名 为 serviceworker.js， 并 放置 在 项 目 根 目录 的 public 文件 夹 中 ， 即 
public/serviceworker.js。 此 时， 如 果 你 刷新 浏览 器 ， 应 该 会 看 到 一 条 消息 ， 告 诉 你 “Service 
worker registered with scope: http://localhost:8443/”。 虽 然 现 在 我 们 的 service worker 只 是 一 
个 空 文件 ， 但 它 仍然 是 一 个 有 效 的 service worker， 并 且 已 经 注册 成 功 了 。 

















可 能 你 会 想 把 serviceworker.js 文件 移动 到 项 目的 js 子 目 录 。 请 暂时 把 它 放 在 
根 目录 中 。 在 2.11 节 中 ， 你 将 会 了 解 到 这 一 点 的 重要 性 。 











让 我 们 开始 探索 service worker 可 以 做 的 事情 。 
在 serviceworker.js 文件 中 添加 下 列 代 码 : 











注 1: 如 果 你 没有 看 到 这 条 错误 信息 ， 请 确保 你 的 本 地 服务 器 正在 运行 ， 并 阅读 关于 浏览 器 支持 的 内 容 〈 即 
2.5 节 中 的 “service worker 的 浏览 器 支持 度 ”。 




















你 的 第 一 个 service worker | 13 


self.addEventListener("fetch", function(event) { 
console.log("Fetch request for:", event.request.url); 


}); 


这 上段 代码 通过 调用 self 变量 的 addEventListener 方法 (在 service worker 中 ，self 指向 
service worker 本 身 )， 在 我 们 的 service worker 中 添加 了 一 个 事件 监听 器 。 这 个 监听 器 会 监 
听 所 有 经 过 service worker 的 fetch 事件 ， 并 运行 我 们 接 下 来 定义 的 函数 ， 将 事件 对 象 event 
作为 唯一 参数 传递 。 在 我 们 定义 的 函数 中 ， 通 过 访问 事件 的 request 对 象 ( 这 是 fetch 事件 
中 的 一 个 属性 )， 把 这 次 请 求 的 URL 打印 到 控制 台中 。 
现在 刷新 页 面 ， 应 该 能 看 到 页 面 发 起 的 所 有 请 求 都 被 记录 在 浏览 器 的 控制 台中 。( 如 果 你 
没有 在 控制 台 看 到 任何 URL， 可 能 是 因为 旧版 本 的 空 service worker 依然 在 控制 页 面 。 参 
见 “service worker 生命 周期 ”获取 相关 技巧 。) 



























































service worker 生命 周期 


你 可 能 已 经 注意 到 ， 当 你 修改 service worker 文件 的 时 候 ， 这 些 修改 并 没有 在 刷新 浏览 
器 之 后 立即 生效 。 这 是 因为 旧版 本 的 service worker 依然 处 于 激活 (active) 状态 ， 与 
此 同时 ， 新 的 service worker 仍然 处 于 等 待 (waiting) 状态 ， 直 到 旧版 本 不 再 控制 页 面 
为 止 。 


虽然 这 看 起 来 可 能 非常 不 方便 ， 但 它 实际 上 是 service worker 的 一 项 非常 强大 的 特性 。 
我 们 将 在 第 4 章 更 详细 地 探讨 这 一 点 。 


为 了 简化 开发 ， 你 可 以 告诉 浏览 器 让 新 的 service worker 立即 控制 页 面 。 在 Chrome 浏 
览 器 中 ,这 可 以 通过 开发 者 工具 的 Application 选项 卡 实现 : 在 “Service Workers” 选 
项 中 , 句 选 “Upload on reload”( 见 图 2-5)。 这 样 可 以 确保 每 次 修改 service worker 并 
刷新 页 面 时 ， 新 的 service worker 会 立即 控制 页 面 。 





[x 串 Console Elements Network Redux Application Sources Timeline Profies » XX 


Application Service Workers 
转 Manifest 


人 农 Service Workers 


画 Clear storage 


| Offline Update on reload [ Bypass for network |] Show all 


Storage 

Pp 33 Local Storage 

Pp 22 Session Storage 
吕 IndexedDB 

















2-5: 打开 “Upload on reload” 











上 述 的 演示 可 能 没有 给 你 留 下 深 刻 的 印象 ， 那 么 请 思 萎 : 我 们 的 页 面 发 起 的 每 一 个 请 求 
(包括 向 第 三 方 服 务 器 发 起 的 请 求 ) 现在 都 会 经 过 我 们 的 service worker。 现 在 所 有 的 这 些 
请 求 都 可 以 被 拦截 、 分 析 ， 甚 至 被 操控 。 


让 我 们 通过 一 个 例子 看 看 这 个 特性 有 多 强大 。 
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把 serviceworker.js 中 的 代码 替换 成 下 列 代 码 ， 并 刷新 你 的 浏览 器 


self.addEventListener("fetch", function(event) { 
if (event.request.url.includes("bootstrap.min.css")) { 
event.respondwith( 
new Response( 
" .hoteL-sLogan {background: green!important;} nav {display:none}", 
{ headers: { "Content-Type": "text/css" }} 


上 述 代码 监听 fetch 事件 ， 并 检查 每 个 请 求 的 URL 是 否 包含 bootstrap.min.css 字符 串 。 
如 果 包 含 ，service worker 就 会 动态 创建 一 个 Response 对 象 ， 其 中 包含 了 自 定义 的 CSS， 
并 使 用 这 个 对 象 作 为 响应 ， 而 不 会 向 远程 服务 器 请 求 这 个 文件 ( 见 图 2-6)。 
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图 2-6: 重 写 CSS 请 求 ， 并 修改 背景 颜色 


仅仅 用 了 短 短 几 行 JavaScript 代码 ， 我 们 就 创建 了 一 个 可 以 拦截 第 三 方 服务 器 请 求 的 
service worker， 途 空 编 写 了 一 个 新 的 响应 并 展示 给 浏览 器 ， 看 起 来 就 像 是 服务 端 返 回 了 结 
果 一 样 。 从 本 质 上 说 ， 我 们 在 浏览 器 内 部 创建 了 一 个 代理 服务 器 


service worker 浏览 器 的 支持 度 

虽然 service worker 的 规范 在 2014 年 才 发 布 ， 但 是 浏览 器 接纳 service worker 
的 速度 却 出 人 意料 地 快 。 到 2015 年 底 ，Chrome、Opera、Firefox 和 Samsung 
Internet 都 已 经 支持 service worker 了 。 

在 本 书 出 版 的 时 候 ，WebKit 团队 正 致力 于 将 service worker 融入 到 iPhone 和 
所 有 基于 Safari 的 浏览 器 上 ， 另 外 Microsoft Edge 团队 也 在 努力 当中 。 

要 了 解 service worker 的 浏览 器 支持 的 最 新 状态 ， 以 及 相关 技术 ， 请 参见 
Jake Archibald 的 网 页 “Is ServiceWorker Ready?”。 
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目光 FE: 并 全 
2.6 ”什么 是 渐进 增强 
渐进 增强 (progressive enhancement) 是 我 们 的 应 用 以 及 任何 现代 Web 应 用 的 核心 理念 。 
渐进 增强 能 够 为 用 户 提供 尽 可 能 多 的 功能 体验 。 这 意味 着 开发 的 网 站 不 会 仅仅 因为 用 户 浏 
览 器 不 支持 某 项 功能 就 月 并。 
可 以 把 渐进 增强 看 作 一 种 分 层 构 建 Web 应 用 的 方式 。 从 基础 的 内 容 、 简 单 的 HTML 链接 、 
图 像 等 开始 。 然 后 为 用 户 提 供 JavaScript 支持 ， 添 加 一 层 增 强 的 链接 用 于 异步 获取 内 容 ， 
并 使 用 交互 式 的 谷歌 地 图 替换 地 图 的 静态 图 片 ， 为 支持 service worker 的 浏览 器 添加 离线 
支持 ， 向 可 以 接收 推送 的 用 户 发 送 通知 。 
这 样 做 的 优点 是 ， 不 仅 可 以 为 所 有 用 户 提供 功能 完整 的 应 用 ， 还 可 以 使 你 的 网 站 兼容 所 有 
用 户 (包括 那些 使 用 旧 浏 览 器 或 者 功能 电话 的 用 户 )， 而 且 还 可 以 让 搜索 引 区 正确 地 索引 
所 有 内 容 。 


在 注册 service worker 上 时， 我们 首先 要 验证 浏览 器 支持 情况 。 支 持 service worker 的 浏览 器 
用 户 将 会 享受 到 增强 的 体验 ， 而 其 他 用 户 仍 将 获得 过 往 的 全 部 体验 。 我 们 在 逐步 增强 应 用 
的 同时 ， 不 会 影响 到 其 他 的 用 户 。 


注意 不 要 混 靖 渐 进 增强 和 渐进 式 Web 应 用 这 两 个 术语 。 虽 然 理 想 的 做 法 是 使 用 渐进 增强 
的 方式 来 开发 渐进 式 Web 应用， 但 是 从 技术 上 来 说 这 不 是 必须 的 。 你 可 以 开发 一 个 这 样 的 
渐进 式 Web 应 用 ， 它 在 现代 浏览 器 上 运行 得 很 好 ， 但 是 在 其 他 所 有 浏览 器 中 都 很 糟糕 一 一 
请 不 要 这 样 做 。 


2.7 HTTPS 和 service worker 


正如 你 刚才 看 到 的 ，service worker 可 以 拦截 请 求 、 修 改 内容 ， 甚 至 把 内 容 完 全 替换 成 新 的 
响应 。 为 了 保护 用 户 和 防止 中 间 人 攻击 ， 避 免 恶 意 的 第 三 方 利用 这 些 权 限 ， 只 有 使 用 安全 
连接 (HTTPS) 的 页 面 才能 注册 service worker。 


在 开发 过 程 中 ， 你 可 以 通过 主机 名 localhost 使 用 service worker， 这 样 可 以 绕 过 安全 连接 
的 限制 (例如 ，http:/localhost/ 和 http://local-host:1234/user/index.html 都 可 以 注册 并 使 用 
service worker) 。 但 是 一 旦 你 把 Web 应 用 部 署 到 服务 端 ， 就 必须 使 用 安全 的 HTTPS 连接 来 
保证 service worker 正常 工作 。 

随 着 Web 变 得 越发 强大 ， 它 的 许多 新 特性 都 要 求 使 用 HTTPS。 除 了 service worker， 其 他 
很 多 新 特性 同样 有 这 个 要 求 。 例 如 ，SpeechRecognition 等 其 他 API 虽然 没有 强制 要 求 使 用 
HTTPS， 但 是 在 HITPS 环境 下 ， 其 功能 要 强大 得 多 。 甚 至 还 有 一 些 功 能 过 去 在 非 安全 连 
接 下 可 以 使 用 ， 但 是 已 经 变 成 仅 在 HTTPS 环境 下 可 用 了 ， 例 如 Geolocation API。 

如 果 你 还 需要 更 多 的 动力 以 迁移 到 HTTPS，Google 宣布 它 已 开始 在 搜索 排名 中 给 予 使 用 
安全 连接 的 网 页 略 高 的 权重 。 


如 今 ， 网 站 使 用 HTTPS 比 以 前 更 便宜 ， 也 更 简单 。 很 多 新 的 证 书 机 构 甚 至 已 经 开始 免费 

















































































































提供 SSL 证 书 ， 而 且 配置 服务 器 的 新 工具 使 得 配置 过 程 变 得 更 加 简单 。 如 果 你 仍然 坚持 使 
用 HITP， 很 快 就 会 没有 借口 了 。 


2.8 从 Web 获 取 内 容 














在 前 面 编写 的 代码 中 ， 我 们 通过 指定 内 容 和 头 部 ， 从 零 开 始 创建 了 一 个 新 的 响应 对 象 ， 并 


使 用 它 来 响应 请 求 。 

而 service worker 更 广泛 的 用 途 是 响应 来 源 于 网 络 的 请 求 。 

把 serviceworker.js 的 代码 替换 成 下 列 内 容 : 
self.addEventListener("fetch", function(event) { 


if (event.request.url.includes("/img/logo.png")) { 
event.respondwith( 


)3 
} 
}); 





3 
rs 


fetch("/img/logo-flipped.png") 


果 你 遵循 上 述 所 有 步骤 ， 那 么 当 你 刷新 页 面 时 ， 网 站 的 标志 应 该 会 上 下 翻转 ( 见 图 2-7)。 
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图 2-7: 使 用 另 一 张 图 片 来 重 写 图 片 请 求 


和 之 前 一 样 ， 








我 们 监听 fetch 事件 ， 只 不 过 这 次 我 们 寻找 的 请 求 是 /img/logo.png。 当 检测 到 





这 样 的 请 求 时 ， 我 们 使 用 fetch 命令 创建 一 个 新 的 请 求 ， 并 传递 男 一 个 标志 图 片 的 URL。 


fetch 会 返回 














一 个 promise， 其 中 包含 了 新 的 响应 ， 我 们 在 event .respondWith 方法 中 使 用 


它 来 响应 原本 的 请 求 。 


换 句 话说 ， 我 们 i 上 service worker 监听 了 标志 图 片 的 请 求 ， 并 请 求 另 一 个 标志 图 片 作为 代 
替 ， 然 后 返回 给 浏览 器 窗口 。 
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fetch(request[, options]); 


fetch 方法 的 第 一 个 参数 是 强制 必 传 的 ， 可 以 包含 一 个 request 对 象 ， 也 可 以 包含 一 个 
相对 路 径 或 者 绝对 路 径 的 URL 字符 囊 : 


// 通过 URL 请 求 

fetch("/img/logo.png"); 

// 通过 request 对 象 中 的 URL 请 求 

fetch(event.request.url); 

// 通过 传递 request 对 象 请 求 

// 在 这 个 request 对 象 中 ， 除 了 URL， 可 能 还 包含 了 额外 的 头 部 信息 、 表 单数 据 等 


fetch(event .request ) ; 











第 二 个 参数 是 可 选 的 ， 可 以 包含 一 个 对 象 ， 里 面 是 请 求 的 选项 。 


下 面 这 个 例子 发 起 了 一 个 图 片 的 POST 请 求 ， 并 在 头 部 中 包含 了 cookie 信息 
(credentials 属性 的 默认 值 是 omit， 这 意味 着 fetch 默认 是 不 会 发 送 cookie 的 ) : 
fetch("/img/logo.png", { 
method: "POST", 
credentials: "include" 


}); 


fetch 会 返回 一 个 promise， 它 在 解析 之 后 会 得 到 一 个 响应 对 象 。 


2.9 捕获 离线 请 : 


让 我 们 使 用 刚才 学 到 的 关于 service worker 的 所 有 内 容 ， 来 检测 用 户 何 时 处 于 离线 状态 ， 并 
向 他 呈现 友好 的 错误 消息 ， 用 来 代替 浏览 器 的 默认 错误 提示 。 


我 们 从 修改 serviceworker.js 的 代码 开始 ， 对 于 所 有 的 请 求 ， 简 单 地 获取 并 返回 它们 原始 请 
求 的 内 容 : 
self.addEventListener("fetch", function(event) { 
event.respondWwith( 
fetch(event.request) 
); 
]); 
仔细 阅读 前 面 的 代码 ， 你 可 能 会 想 知 道 这 个 事件 的 意义 是 什么 。 我 们 监听 并 捕获 了 所 有 的 
fetch 事件 ， 然 后 使 用 另 一 个 完全 相同 的 fetch 操作 进行 响应 。 如 果 你 在 浏览 器 中 查看 这 个 
网 站 ,会 看 到 网 站 的 行为 和 我 们 添加 service worker 之 前 是 完全 一 致 的 。 


那么 这 有 什么 意义 呢 ? 你 可 能 还 记得 ， 在 上 一 个 例子 中 ， 我 提 到 了 fetch 返回 的 响应 是 包 
庄 在 一 个 promise 中 的 。 通 过 promise 包 庄 响应 之 后 ， 我 们 就 可 以 在 promise 失败 的 时 候 捕 
获 异 常 ， 并 进行 处 理 。 


把 serviceworker.js 的 代码 替换 成 下 列 代 码 : 








下 



































self.addEventListener("fetch", function(event) { 
event.respondwith( 
fetch(event.request).catch(function() { 
return new Response( 
"Welcome to the Gotham Imperial Hotel.\n"+ 
"There seems to be a problem with your connection.\n"+ 
"Ne Look forward to telling you about our hotel as soon as you go online." 
3 
}) 
); 


刷新 浏览 器 ， 确 保 最 新 版 本 的 service worker 已 经 被 正确 注册 与 安装 ， 然 后 切换 到 离线 状 
态 (参见 2.4 节 的 “模拟 离线 状态 ”) 并 再 次 刷新 页 面 。 现 在 ， 你 应 该 会 看 到 哥 谭 帝国 酒店 
的 个 性 化 消息 ， 而 不 是 浏览 器 的 本 地 错误 提示 〈 见 图 2-8) 。 























https://www.gothamimperial.com 


Welcome to the Gotham Imperial Hotel. 
There seems to be a problem with your connection. 
We look forward to telling you about our hotel as soon as you go online. 











图 2-8: 简单 的 离线 文本 信息 
让 我 们 给 这 个 消息 添加 格式 ， 并 逐 行 检 查 代码 。 


2.10 创建 HTML 响 应 


由 于 我 们 正在 推动 Web 向 前 迈进 ， 而 不 是 后 退 ， 所 以 我 们 需要 改进 代码 ， 向 离线 用 户 发 送 
一 个 优雅 的 HTML 页 面 ， 而 不 是 纯 文本 内 容 。 


把 serviceworker.js 中 的 代码 替换 成 下 列 代码 : 


var responseContent = 
"<html>" + 
"<body>" + 
"<style>" + 
"body {text-align: center; background-color: #333; color: #eee;}" + 
"</style>" + 
"<h1>Gotham Imperial Hotel</h1i>" + 
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"<p>There seems to be a problem with your connection.</p>" + 

"<p>Come visit us at 1 Imperial Plaza, Gotham City for free WiFi.</p>" + 
"</body>" + 

"</html>"; 


self.addEventListener("fetch", function(event) { 
event.respondWwith( 
fetch(event.request).catch(function() { 
return new Response( 
responseContent, 
{headers: {"Content-Type": "text/html"}} 
); 
}) 
); 
]); 


刷新 浏览 器 并 确保 注册 了 新 的 service worker 之 后 ， 在 离线 状态 下 访问 页 面 ， 检 验 应 用 新 
的 离线 消息 (图 2-9)。 
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Gotham Imperial Hotel 


There seems to be a problem with your connection. 


Come visit us at 1 Imperial Plaza, Gotham City for free WiFi. 














让 我 们 看 看 这 是 如 何 实现 的 。 

首先 ， 我 们 定义 了 希望 显示 给 离线 用 户 的 HTML 内 容 ， 并 将 其 放 进 了 一 个 名 为 response- 

Content 的 变量 中 。 

Ce 件 监 听 器 ， 监 听 所 有 的 fetch 事件 。 当 检测 到 fetch 事件 时 ， 我 们 的 
会 被 调用 ， 它 接收 一 个 FetchEvent 对 象 作 为 参数 。 随 后 ， 我 们 调用 该 事件 对 象 的 

方法 来 响应 这 个 事件 ， 避 免 其 触发 默认 行为 。 

respondWith 方法 接收 一 个 参数 ， 它 可 以 是 一 个 响应 对 象 ， 也 可 以 是 一 段 可 以 通过 promise 

得 出 响应 对 象 的 代码 。 后 续 的 代码 构建 了 该 响应 。 


我 们 首先 调用 了 fetch， 并 传 入 原始 请 求 (通过 Fetch Event 对 象 获取 )。 要 强调 的 是 ， 我 
们 需要 传 入 原始 的 请 求 对 象 ， 而 不 仅仅 是 URL， 以 保证 任何 的 头 部 信息 、cookie 和 请 求 方 




















法 都 保持 不 变 。fetch 方法 返回 一 个 promise。 如 果 用 户 和 服务 器 都 在 线 ， 文 件 可 以 访问 ， 
并 且 整 个 过 程 一 切 顺利 ， 那 么 这 个 promsie 就 会 变 成 完成 状态 ，fetch 会 返回 响应 。 然 后 响 
应 会 被 传递 回 event.respondwith， 它 再 将 响应 发 送 回 用 户 正在 浏览 的 页 面 。 但 是 ， 如 果 在 
试图 获取 文件 的 时 候 出 错 (例如 用 户 登 机 了 )，promise 就 会 变 成 失败 状态 ， 我 们 在 catch 
方法 中 定义 的 回调 函数 就 会 被 调用 。 

在 这 个 回调 函数 里 ， 通 过 调用 new Response 构造 了 一 个 新 的 响应 ， 并 传人 了 两 个 参数 。 第 
一 个 参数 是 响应 的 主体 〈 即 我 们 之 前 定义 的 HTML )。 第 二 个 参数 是 可 选 的 选项 对 象 。 我 
们 使 用 这 个 选项 对 象 来 添加 一 个 Content-Type 头 部 到 响应 中 。 

随后 ， 这 个 新 的 响应 被 返回 给 event.respondwith， 并 发 送 给 页 面 ， 就 像 Web 服务 器 返回 
了 一 个 常规 响应 一 样 。 


尔 可 能 会 疑惑 ， 为 何 我 们 一 定 要 在 创建 响应 的 时 候 手 动 定义 Content-Type 头 
部 。 不 妨 尝试 修改 代码 ， 把 头 部 信息 删 掉 ， 只 返回 响应 内 容 ， 并 观察 结果 。 
浏览 器 将 会 把 响应 视 为 纯 文 本 。 所 有 的 内 容 都 会 显示 为 纯 文 本 ， 包 括 HTML 
标签 和 样式 。 

通常 你 不 需要 告诉 浏览 器 HTML 是 HTML， 那 么 在 这 里 发 生 了 什么 呢 ? 

大 部 分 Web 服务 器 的 配置 ， 都 会 为 大 部 分 常见 文件 类 型 自动 提供 正确 的 头 部 
信息 。 当 服务 器 发 送 HTML 文件 时 ， 会 构造 一 个 包含 HTML 和 多 个 头 部 的 
响应 ， 其 中 包括 一 个 Content-Type 头 部 ， 让 浏览 器 知道 该 如 何 处 理 响应 。 由 
于 我 们 是 从 头 开始 构造 响应 的 ， 所 以 不 仅 要 关心 响应 的 内 容 (HTML)， 还 
要 处 理 响应 的 头 部 。 


















































2.11 理解 service worker 作 用 域 


在 本 章 前 面 ， 我 们 把 service worker 文件 放 在 了 项 目的 根 目 录 中 ， 现 在 我 们 来 探究 为 什么 
一 定 要 放 在 根 目录 而 不 是 子 目 录 中 (例如 /js/sw.js)。 


由 于 service worker 功能 强大 ， 可 以 修改 任何 通过 它 的 请 求 ， 因 此 需要 对 其 进行 一 定 的 安 
全 限制 。 


试想 一 下 ， 你 拥有 一 个 网 站 ， 其 中 列 出 了 哥 谭 最 好 的 餐馆 (例如 http://www.GothamEats. 
com/)。 假 设 你 允许 每 个 餐馆 在 你 的 域名 下 托管 一 个 网 站 ， 以 提供 餐馆 的 菜单 和 照片 〈 例 
如 http://www.GothamEats.com/Ginnos)。 如 果 Ginnos 餐馆 的 所 有 者 上 传 了 一 个 service 
worker 脚本 到 他 的 网 站 (例如 http:/www.GothamEats.com/Ginnos/sw.js)， 它 可 以 改变 其 竞 
争 对 手 网 站 (例如 http:/www.GothamEats.com/Ralphs) 的 所 有 流量 ,说 该 餐馆 欣 业 了 ,会 
发 生 什么 ?假如 浏览 器 有 一 天 允许 这 样 的 情况 发 生 ， 哥 谭 的 秩序 将 会 受到 损害 。 

为 了 预防 这 种 问题 ， 每 个 service worker 都 有 一 个 有 限 的 控制 范围 。 这 个 范围 就 是 通过 放 
置 service worker 的 JavaScript 文件 的 目录 决定 的 。 之 前 ， 我 们 通过 把 serviceworker.js 文件 
放置 在 项 目的 根 目录 中 ， 人 允许 其 控制 来 自 站 点 中 任何 地 方 的 所 有 请 求 。 如 果 我 们 把 它 放 置 
到 js 目录 中 ， 只 有 源 于 该 子 目 录 的 请 求 才 会 通过 它 。 
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你 可 以 在 注册 service worker 的 时 候 传 入 一 个 scope 选项 ， 用 来 覆盖 service worker 默认 的 
作用 域 。 这 样 做 可 以 把 service worker 的 作用 域 限制 为 目录 的 较 小 子 集 ， 但 是 不 能 扩展 到 
比 它 的 可 用 范围 更 广 〈 例 如 ， 你 可 以 限制 位 于 /ginnos/sw.js 的 service ee 让 它 只 能 影 
响 到 /ginnos/menu/ 的 请 求 ， 但 是 你 不 能 将 其 作用 域 扩展 到 域 的 根 目录 )。 

// 这 两 条 命令 将 具有 完全 相同 的 作用 域 : 


navigator .serviceWorker .register("/sw.js"); 
navigator .serviceWorker.register("/sw.js", {scope: "/"}); 
































// 这 两 条 命令 将 注册 两 个 不 同 的 service worker 

// 每 个 service worker 各 自控 制 了 一 个 不 同 的 目录 : 

AVL to a ican er Tec loterc ewnes 35 守 {scope: "/Ginnos"}); 
navigator .serviceWorker .register("/sw-ralphs.js", {scope: "/Ralphs"}); 











2.12 小 结 


虽然 很 容易 认为 我 们 仅仅 是 把 浏览 器 的 错误 消息 禁 换 成 了 不 那么 奇特 的 错误 消息 ”, 但 实际 
上 上， 我 们 在 这 里 已 经 完成 了 一 个 令 人 难以 置信 的 壮举 。 


通过 注册 service worker 并 监听 请 求 ， 我 们 将 自己 置 于 浏览 器 和 网 络 之 间 。 我 们 学 会 了 如 何 
拦截 每 一 个 页 面 请 求 (包括 向 第 三 方 服务 器 发 出 的 请 求 )， 以 及 如 何 修改 、 替 换 请 求 ， 或 
者 检测 请 求 失败 的 情况 。 

最 重要 的 是 ， 我 们 增强 了 网 站 的 功能 ， 使 得 离线 用 户 不 再 处 于 黑暗 之 中 。 到 达 哥 谭 (这 里 
的 信号 塔 时 不 时 会 出 问题 ) 的 用 户 ， 即 使 在 离线 状态 下 也 能 浏览 一 个 简化 的 网 站 版 本 。 

在 下 一 章 中 ， 我 们 将 利用 所 学 到 的 service worker 知识 ， 再 加 上 一 点 缓存 “魔术 ”， 为 用 户 
提供 完整 的 哥 谭 帝国 酒店 体验 ， 不 管 他 们 在 线 还 是 离线 。 















































注 2: 你 知道 可 以 在 Chrome 的 错误 页 面 上 玩 恐 龙 吗 ? 快 去 试 试点 击 它 吧 ! 
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在 第 2 章 结尾 ， 我 们 已 经 让 Web 和 哥 谭 帝国 酒店 向 前 迈进 了 一 大 步 。 当 用 户 离线 时 ， 我 们 
向 他 们 展示 了 自 定 义 HTML 内 容 ， 而 不 是 浏览 器 的 错误 提示 。 不 幸 的 是 ， 我 们 同时 后 退 了 
两 步 ， 因 为 我 们 只 能 展示 一 个 简单 的 页 面 ， 没 有 图 片 ， 没 有 样式 ， 也 没有 品牌 介绍 ， 使 得 
这 个 现代 化 网 站 和 “ 哥 谭 帝国 酒店 ”这 个 名 称 不 相称 。 

本 章 的 目标 是 让 用 户 在 离线 访问 我 们 的 站 点 时 ， 可 以 看 到 index-offine.html 文件 的 内 
容 ， 包 括 其 中 的 图 片 和 样式 〈 见 图 3-1)。 可 以 在 浏览 器 中 打开 这 个 页 面 ， 看 看 它 的 样子 
(http://localhost:8443/index-offine.htm!l) : 












































© localhost:8443/index-offline.html 


GOWIIANA 


llelsllle Nllelle 


们 例会 从 六 


Thereappears tobe aproblemwithyour eonnection. 


Comevisit us at LImperialplaze Gotham Cityfor Free WiFi, 














图 3-1: 我 们 希望 展示 给 离线 用 户 的 页 面 
你 可 能 会 猜测 ， 为 了 实现 这 一 点 ， 我 们 必须 捕获 失败 的 请 求 ， 并 返回 代替 的 内 容 : 
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self.addEventListener("fetch", function(event) { 
event.respondWwith( 
fetch(event .request) .catch(function() { 
return fetch("/index-offline.html"); 
}) 
); 
]); 
尔 能 发 现 这 段 代码 的 问题 吗 ? 
代码 虽然 没有 编码 错误 ， 但 是 有 逻辑 问题 。 我 们 只 有 在 知道 用 户 离线 的 时 候 ， 才 试图 去 获 
取 离 线 文件 。 我 们 需要 在 用 户 在 线 的 时 候 先 拿 到 文件 ， 并 存储 在 设备 上 ， 这 样 在 用 户 离线 
的 时 候 才 能 提供 内 容 。 
现在 仍然 未 解 的 一 个 谜团 是 在 用 户 设备 上 用 来 存储 内 容 的 神秘 领域 。 所 幸 的 是 ， 当 service 
worker 被 引入 的 时 候 ， 我 们 还 得 到 了 新 的 CacheStorage API 这 正 是 那个 未 解 的 谜团 。 


3.1 CacheStorage 是 什么 ， 不 是 什么 


CacheStorage 是 一 种 全 新 的 缓存 层 ， 你 拥有 完全 的 控制 权 。 

我 们 都 知道 老式 的 浏览 器 缓存 。 这 种 缓存 在 后 台 不 倦 地 工作 ， 决 定 哪些 文件 需要 缓存 ， 何 
时 从 缓存 或 者 网 络 获取 文件 ， 以 及 何 时 删除 旧 的 缓存 文件 。 作 为 开发 人 员 ， 这 完全 不 在 你 
的 控制 范围 内 。 你 影响 浏览 器 缓存 内 容 的 唯一 方式 ， 就 是 通过 HTTP 头 部 (在 服务 器 发 送 
每 个 响应 时 一 并 发 送 ) 向 浏览 器 提示 相关 的 内 容 。 

CacheStorage 也 不 像 旧 的 AppCache API， 后 者 使 用 了 一 种 更 落后 、 更 死板 的 方式 ， 通 过 组 
存 清单 文件 定义 了 哪些 文件 应 该 能 够 脱 机 使 用 。AppCache API 已 经 从 Web 标准 中 移 除 ， 
并 且 Jake Archibald 在 文章 “Application Cache is a Douchebag” 中 猛烈 地 择 击 了 它 。 
CacheStorage 采取 了 不 同 的 方式 ， 将 控制 权 放 到 了 开发 人 员 的 手中 。 

和 前 面 提 到 的 技术 不 同 ， 这 是 通过 暴露 一 系列 基本 的 方法 〈 如 创建 和 打开 任意 数量 的 组 
存 ， 以 及 在 其 中 存储 、 检 索 或 删除 响应 ) 来 实现 的 。 


将 service worker 和 CacheStorage 的 能 力 结合 在 一 起 ， 我 们 可 以 通过 程序 直接 控制 缓存 哪 
些 内 容 、 删 除 哪些 缓存 ， 以 及 哪些 内 容 从 缓存 返回 、 哪 些 内 容 从 网 络 返回 。 


3.2 ”决定 何 时 进行 缓存 

让 我 们 回 到 哥 谭 帝国 酒店 ， 看 看 应 该 如 何 缓存 文件 ， 以 显示 我 们 的 离线 网 站 。 

我 们 已 经 知道 ， 在 用 户 离 线 时 尝试 获取 索引 文件 的 离线 版 本 会 引起 问题 。 我 们 真正 需要 
的 ， 是 在 知道 用 户 在 线 时 ， 就 去 获取 这 个 文件 以 及 其 他 相关 的 文件 。 

让 我 们 来 看 看 简化 版 的 service worker 生命 周期 ( 见 图 3-2)。 





























































































































安装 中 激活 中 已 激活 











图 3-2: service worker 生命 周期 的 简化 表示 
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到 目前 为 止 ， 我 们 只 使 用 service worker 监听 了 fetch 事件 ， 这 类 事件 只 能 够 被 激活 状态 的 
service worker 所 捕获 。 我 们 需要 监听 一 个 较 早 发 生 的 事件 ， 并 使 用 这 个 事件 来 缓存 我 们 的 
service worker 所 依赖 的 文件 。 


的 此 ， 我 们 可 以 使 用 service worker 的 install 事件 。 在 每 个 service worker 的 生命 周期 中 ， 

个 事件 只 会 发 生 一 次 ， 即 在 首次 注册 之 后 以 及 激活 之 前 发 生 。 在 service worker 接管 页 
me fetch 事件 之 前 ， 我 们 通过 监听 这 个 事件 ， 得 到 了 一 个 极 好 的 机 会 来 缓存 所 
有 希望 离线 可 用 的 文件 。 


如 果 出 现 问 题 ， 我 们 甚至 可 以 在 install 事件 中 取消 安装 service worker。 这 使 得 安装 阶段 成 
为 了 缓存 所 需 请 求 的 绝 佳 机 会 。 如 果 在 缓存 时 出 现 问 题 ， 可 以 中 止 安装 ， 因 为 我 们 知道 ， 
浏览 器 会 在 用 户 下 次 访问 页 面 时 再 次 尝试 安装 service worker。 通 过 这 种 方式 ， 我 们 可 以 有 
效 地 为 service worker 创建 安装 依赖 一 一 在 service worker 安装 并 激活 之 前 ， 必 须 先 下 载 并 
缓存 这 些 文件 。 


3.3 在 CacheStorage 中 存储 请 求 


让 我 们 开始 编码 。 如 果 你 没有 完成 第 2 章 中 的 所 有 步骤 ， 或 者 想 要 确保 当前 代码 处 于 本 章 
开头 的 状态 ， 请 在 命令 行 中 运行 以 下 内 容 : 


git reset --hard 
git checkout ch03-start 


清空 serviceworker.js 文件 的 内 容 ， 并 替换 为 以 下 代码 : 
self.addEventListener("install", function(event) { 
event .waitUntil( 
caches.open("gih-cache").then(function(cache) { 
return cache.add("/index-offline.html"); 
}) 
); 
]); 
此 处 有 一 些 新 的 命令 是 我 们 之 前 没有 遇 到 过 的 。 让 我 们 逐一 检查 。 
首先 ， 我 们 为 install 事件 添加 了 事件 监听 器 。 在 新 的 service worker 注册 之 后 ， 这 个 事件 
会 立即 在 其 安装 阶段 被 调用 。 
由 于 我 们 的 service worker 将 依赖 于 index-offline.html， 我 们 需要 先 验证 它 是 否 已 经 成 功 组 
存 ， 然 后 才能 认为 安装 成 功 ， 并 激活 新 的 service worker。 因 为 需要 异步 获取 文件 并 缓存 起 
来 ， 所 以 我 们 需要 延迟 install 事件 ， 直 到 异步 事件 完成 。 


为 了 实现 这 一 点 ， 我 们 在 install 事件 中 调用 了 waituntil。waituntil 会 延长 事件 的 存在 
时 间 ， 直 到 传 入 的 promise 得 以 解决 。 这 样 我 们 就 可 以 等 到 成 功 将 文件 存储 在 缓存 中 ， 再 

声明 install 事件 完成 ， 并 且 ， 如 果 在 任何 步骤 遇 到 了 问题 ， 可 以 通过 拒绝 promise 中 止 
安装 。 


在 waituntil 函数 中 ， 我 们 调用 了 caches.open 并 传人 了 缓存 的 名 称 (这 提示 了 CacheStorage 
的 另 一 个 强大 特性 : 我 们 可 以 为 网 站 创建 多 份 缓存 ， 在 第 4 章 我 们 将 会 利用 这 一 特性 )。 
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caches.open 打开 并 返回 一 个 现 有 的 缓存 ， 或 者 如 果 没 有 找到 对 应 名 称 的 缓存 ， 就 将 创建 
并 返回 它 。caches.open 返回 一 个 包 庄 在 promise 中 的 cache 对 象 ， 因 此 我 们 接 下 来 使 用 
then 语句 ， 并 传 入 一 个 函数 ， 该 函数 将 这 个 cache 对 象 作为 参数 。 


我 们 需要 做 的 最 后 一 件 事情 ， 是 调用 cache.add('/index-offline.html')， 这 个 方法 将 请 
求 文件 并 将 文件 放 入 缓存 中 ， 缓 存 的 键 名 就 是 "/index-offline.html"。 


前 面 例子 中 的 代码 把 一 系列 的 promise 串联 在 一 起 。 粗 略 翻译 成 伪 代 码 ， 可 以 这 样 表达 : 


If 检测 到 install 事 件 ， 需 要 先 完成 下 列 内 容 才 能 宣布 成 功 : 
首先 你 要 成 功 打开 缓存 
随后 
你 要 请 求 文件 ， 并 存储 在 缓存 中 
如 果 上 述 步骤 中 的 任何 一 步 失败 ， 则 中 止 service worker 的 安装 。 
在 install 事件 中 ， 通 过 watituntit 等 待 缓存 完成 ， 确 保 了 在 整个 链条 中 如 果 遇 到 任何 问 
题 ，service worker 都 不 会 被 安装 。 在 已 经 激活 的 service worker 的 任何 代码 中 ， 我 们 都 可 
以 认为 安装 事件 已 经 成 功 完成 了 ， 并 且 index-offine.html 是 在 缓存 中 可 用 的 。 


3.4 从 CacheStorage 中 取 回 请 求 


既然 已 经 将 页 面 的 离线 版 本 存储 到 CacheStorage 当中 ， 我们 需要 从 缓存 中 取 回 并 返回 给 
用 户 。 
在 serviceworker.js 中 添加 下 列 代码 ， 放 置 到 监听 install 事件 的 代码 的 后 面 : 
self.addEventListener("fetch", function(event) { 
event.respondWwith( 
fetch(event.request).catch(function() { 
return caches.match("/index-offline.html"); 
}) 
); 
]); 
你 可 能 会 觉得 这 段 代 码 似曾相识 ， 和 上 一 章 的 代码 很 相似 。 唯 一 的 区 别 是 ， 我 们 没有 构造 
一 个 新 的 响应 或 者 从 Web 获取 内 容 ， 而 是 通过 调用 caches.match， 从 CacheStorage 中 返回 
你 可 能 还 注意 到 ， 代 码 从 缓存 中 返回 请 求 的 时 候 ， 甚 至 没有 先 验证 它 是 否 存在 于 缓存 中 。 
这 是 因为 我 们 已 经 让 service worker 的 安装 强 依赖 于 缓存 这 一 请 求 。 


CacheStorage 遵循 了 同 源 安全 策略 。 无 论 你 是 使 用 caches.match() 还 是 
caches.open()， 都 只 能 访问 当前 源 创建 的 缓存 。 换 名 话说 ， 当 你 的 应 用 运行 
caches .match("bank-password") 的 时 候 ， 只 有 你 的 应 用 创建 的 缓存 可 以 被 搜 
寻 到 。 要 了 解 更 多 关于 同 源 策略 的 内 容 ， 参 见 10.2.2 节 中 的 “ 同 源 策略 ”。 




























































































match(request[, options]); 
给 定 一 个 请 求 ，match 方法 会 从 缓存 中 返回 一 个 response 对 象 。 
match 方法 可 以 在 caches 对 象 上 调用 ， 这 样 会 在 所 有 缓存 中 寻找 ， 也 可 以 在 某 个 特定 
的 cache 对 象 上 调用 : 
// 在 所 有 缓存 中 寻找 匹配 的 请 求 


caches.match("logo.png"); 


// 在 特定 的 缓存 中 寻找 匹配 的 请 求 
caches.open("my-cache").then(function(cache) { 
return cache.match("logo.png"); 


Bo 


match 方法 的 第 一 个 参数 是 需要 在 绥 存 中 寻找 的 内 容 ， 可 以 是 Tequest 对 象 或 者 URL。 
这 应 该 和 你 添加 到 缓存 中 的 请 求 相 匹配 。 


第 二 个 参数 是 非 必 传 的 选项 对 象 。 


match 会 返回 一 个 promise， 并 向 resolve 方法 传 入 在 缓存 中 找到 的 第 一 个 response 对 
象 ， 当 找 不 到 任何 内 容 的 时 候 ， 它 的 值 是 undefined。 


即使 在 找 不 到 对 应 的 响应 时 ，match 方法 返回 的 promise 也 不 会 被 拒绝 。 出 于 这 个 原 
因 ， 除 非 你 可 以 确保 肯定 存在 匹配 ， 否 则 可 能 需要 在 返回 之 前 先 判 断 是 否 找 到 了 匹配 : 
caches.match("/logo.png").then(function (response) { 
if (response) { 
return response; 


} 
}); 


3.5 “在 示例 应 用 缓存 


如 果 你 再 次 访问 首页 (让 这 个 新 的 service worker 有 机 会 安装 ) ， 然 后 在 离线 状态 下 又 一 次 
访问 ， 应 该 能 够 看 到 index-offline.html 的 内 容 。 


但 我 们 还 没有 完成 。 我 们 的 代码 现在 只 知道 如 何 缓存 并 提供 单个 文件 index-offline. 
html。 由 于 没有 样式 和 图 片 ， 我 们 为 离线 用 户 提 供 的 体验 非常 糟糕 。 此 外 ， 我 们 的 代码 在 
任何 请 求 失 败 的 情况 下 ， 都 会 傻 傻 地 缓存 并 返回 同一 个 HTML 文件 。 不 管用 户 请 求 的 是 
index.html、bootstrap.min.css 还 是 gih-offine.css， 只 要 任何 请 求 失 败 ，service worker 总 是 
会 返回 相同 的 HTML 文件 ( 见 图 3-3)。 
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s://www.gothamimperial.com/gih-offline.css 
局 Gotham Imperial Hotel 
/There appears to be a problem with your connection. 


Come visit us at 1 Imperial Plaze, Gotham City for Free WiFi 








3-3: 请 求 样式 表 时 返回 的 HTML 


在 宣告 大 功 告 成 之 前 ， 我 们 还 需要 改进 service worker， 把 它 需 要 的 所 有 资源 都 存储 到 缓存 
中 ， 并 将 每 个 请 求 与 正确 的 响应 相 匹 配 。 


让 我 们 从 缓存 index-offine.html 的 所 有 样式 和 图 片 文件 开始 。 


我 们 可 以 利用 迄今 为 止 所 学 到 的 一 切 来 完成 这 项 任务 ， 简 单 地 串联 一 系列 cache.add 调用 
即 可 : 


self.addEventListener("install", function(event) { 
event.waitUntil( 
caches.open("gih-cache").then(function(cache) { 
return cache.add("/index-offline.html").then(function() { 
return cache.add( 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 








); 
}).then(function() { 

return cache.add("/css/gih-offline.css"); 
}).then(function() { 

return cache.add("/img/jumbo-background-sm.jpg"); 
}).then(function() { 

return cache.add("/img/logo-header .png"); 
]); 


这 样 做 …… 并 不 优雅。 


上 述 代 码 不仅 不 优雅 ， 而 且 通 过 这 样 的 链 式 调用 ， 每 一 个 文件 在 请 求 并 缓存 之 前 ， 必 须 等 
待 上 一 个 请 求 完成 。 这 样 做 使 得 service worker 的 安装 过 程 缓慢 。 


幸运 的 是 ， 还 有 更 佳 的 方法 。 
在 serviceworker.js 中 ， 将 install 事件 监听 方法 替换 成 下 列 代 码 : 
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var CACHE_NAME = "gih-cache"; 

var CACHED URLS = [ 
"/index-offline.html", 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", 
"/css/gih-offline.css", 
"/img/jumbo-background-sm.jpg", 
"/img/Logo-header .png" 

J; 


self.addEventListener("install", function(event) { 
event .waitUntil( 
caches.open(CACHE_NAME).then(function(cache) { 
return cache.addALL(CCACHED_URLS ) ; 
}) 


); 
和 3 
在 上 述 示例 中 ， 我 们 首先 设置 了 两 个 新 的 变量 。 第 一 个 变量 包含 了 缓存 的 名 称 ， 第 二 个 变 
量 是 一 个 数组 ， 其 中 包含 了 一 份 需 要 存储 的 URL 列表 。 


接 下 来 ， 我 们 使 用 cache.addALL() 代 赫 了 cache.add()， 并 传人 需要 缓存 的 URL 数组 。 


cache.addAL1() 的 作用 和 cache.add() 类 似 ， 但 是 前 者 接收 的 不 是 单个 URL， 而 是 一 个 URL 
数组 ， 并 全 部 存储 到 缓存 中 。 如 果 任 何 一 个 请 求 失败 ， 类 似 于 cache.add()，cache.addALL() 
返回 的 promise 将 会 被 拒绝 。 


3.6 ”匹配 每 个 请 求 的 正确 响应 


现在 我 们 缓存 了 展示 离线 应 用 所 需要 的 所 有 静态 资源 ， 但 是 对 于 每 个 失败 的 请 求 ， 我 们 仍 
然 宦 目地 返回 index-offine.html 的 内 容 。 甚 至 在 请 求 一 张 图 片 的 时 候 也 会 返回 HTML。 


我 们 需要 将 每 个 失败 的 请 求 与 正确 的 缓存 响应 相 匹配 ， 并 提供 给 用 户 。 
在 serviceworker.js 中 ， 把 fetch 事件 监听 方法 替换 成 下 列 代码 : 


self.addEventListener("fetch", function(event) { 
event.respondwith( 
fetch(event.request).catch(function() { 
return caches.match(event.request).then(function(response) { 

if (response) { 
return response; 

} else if (event.request.headers.get("accept").includes("text/html")) { 
return caches.match("/index-offline.html"); 





















































}) 

3 

}); 
在 这 个 示例 中 ， 新 的 fetch 事件 处 理 代码 依然 试图 向 网 络 发 起 请 求 ， 并 将 响应 返回 给 在 线 
用 户 。 但 是 ， 如 果 有 任何 请 求 失败 ，catch 块 中 的 新 函数 就 会 起 作用 。 
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catch 函数 一 开始 会 试图 将 发 起 的 请 求 与 在 任何 缓存 中 存储 的 请 求 相 匹配 。 由 于 caches. 





match 返回 的 promise 是 不 会 被 拒绝 的 (即使 匹配 不 成 功 也 是 如 此 )， 在 返 


回 之 前 ， 我 们 先 























要 使 用 if (response) 来 检查 是 否 在 缓存 中 找到 了 响应 。 如 果 没 有 找到 ， 我 们 将 直接 返回 
index-offine.html 的 内 容 作为 代替 。 请 记 住 ， 浏 览 器 永远 不 会 显 式 地 请 求 index-offine.html， 它 








可 能 会 请 求 /index.html 或 者 是 根 目录 (/)。 我 们 只 需要 返回 index-offine.html 





作为 代替 即 可 。 


为 了 安全 起 见 ， 我 在 返回 index-offine.html 之 前 ， 还 进行 了 一 项 额外 的 检查 。 这 项 检查 确 
保 了 请 求 是 包含 了 text/html 的 accept 头 部 的 。 这 样 可 以 确保 我 们 不 会 返回 HTML 内 容 给 

















其 他 类 型 的 请 求 ， 例 如 对 图 片 、 样 式 表 的 请 求 等 。 














你 可 能 还 记得 ， 当 我 们 从 头 开始 创建 一 个 新 的 HTML 响应 时 ， 必 须 将 其 Content-Type 的 值 
定义 为 text/htmL， 以 便 浏 览 器 可 以 正确 地 将 响应 识别 为 HTIML。 那 为 什么 我 们 在 上 述 代码 











示例 中 可 以 直接 返回 响应 ， 无 须 手动 定义 Content-Type 为 HIML、CSS 或 者 图 片 呢 ?其 原因 

















是 ，cache.add() 和 cache.addALL() 请 求 并 缓存 的 是 一 个 完整 的 response 对 象 。 这 个 对 象 不 
仅 包 含 了 响应 体 ， 还 包含 了 服务 器 返回 的 任何 响应 头 (其 中 包含 了 Content-Type) 。 























ignoreSearch 





条 目 有 一 个 潜在 陷阱 ， 你 应 该 牢记 于 心 。 





通过 传递 request 对 象 (例如 caches.match(event.request)) 来 查找 缓存 中 的 


用 户 可 能 不 会 总 是 使 用 相同 的 URL 来 访问 你 的 网 站 。 例 如 , 假设 你 正在 网 站 





上 运行 一 个 新 的 推广 活动 。 如 果 用 户 从 网 站 主页 点 击 来 到 这 个 
那么 他 访问 的 链接 将 是 https:/www.site.com/promo.html。 但 是 女 


活动 的 页 面 ， 
0 果 用 户 通过 


点 击 横幅 广告 来 到 这 个 活动 的 页 面 ， 他 访问 的 链接 可 能 是 https://www.site. 


com/promo.html?utm_source=halloween-campaign&utm_medium=cpc。 存 在 数 

















符 )。 



































百 种 URL 变 体 的 情况 并 不 罕见 ， 每 条 URL 的 差异 仅仅 在 于 它们 的 查询 字符 
串 (也 称 为 search 属性 ， 还 可 以 理解 为 URL 问号 后 面 的 一 串 难 以 阅读 的 字 


如 果 你 在 install 事件 中 把 /promo.html 保 存在 缓存 中 ， 然 后 使 用 caches. 


match(event.request) 尝试 去 寻找 /promo.html?utm_source=a， 会 找 不 到 任何 
内 容 。 为 了 解决 这 个 问题 ， 你 可 以 编写 特定 的 规则 ， 在 将 查询 字符 串 传递 给 
match() 之 前 ， 将 其 从 URL 中 剥离 。 或 者 检测 URL 字符 串 中 是 否 包 含 了 promo. 
html， 然 后 传递 一 个 硬 编码 的 URL 给 match()。 但 是 ， 还 有 更 好 的 办 法 。 

如 果 你 可 以 确保 查询 字符 串 对 于 页 面 内 容 不 会 产生 影响 ， 可 以 使 用 ignoreSearch 








选项 ， 通 知 match() 方法 忽略 查询 字符 串 : 


caches.match(event.request, {ignoreSearch: true}) 





这 样 将 会 匹配 到 请 求 URL 的 条 目 ， 同 时 会 忽略 查询 参数 (例如 /promo.html 可 
以 同时 匹配 /promo.html?utm_source=urchin 和 /promo.html?utm_medium=social ) 。 




















注 1: 感谢 Jeffrey Posnick 提出 的 建议 ， 有 具体 参见 https://pwabook.com/matchhtml。 
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3.7 HTTP 缓存 和 HTTP 头 

需要 记 住 的 重要 一 点 是 ，CacheStorage 不 能 取代 过 去 的 HTTP 缓存 。 

如 果 你 的 服务 器 提供 的 文件 包含 了 一 个 HTTP 头 ， 说 明 该 文件 可 以 在 浏览 器 缓存 中 保存 一 
年 时 间 ， 浏 览 器 就 会 一 直 使 用 浏览 器 缓存 来 提供 这 个 文件 。 当 你 试图 在 service worker 中 
请 求 一 个 文件 的 时 候 ， 在 发 起 网 络 请 求 之 前 ， 它 依然 会 先 检查 浏览 器 缓 在 。 

我 们 来 看 一 个 例子 。 


在 service worker 安装 的 时 候 ， 它 调用 了 cache.addALL(['/main.css'])。 随 后 ， 这 个 文件 
会 从 网 络 请 求 回来 ， 并 保存 在 CacheStorage 中 。 如 果 服 务 器 提供 这 个 文件 时 包含 了 头 部 信 
息 Cache-Control: max-age=31536000 (服务 器 通过 这 种 方式 表示 文件 可 以 缓存 一 年 时 间 )， 
除了 service worker 会 将 文件 保存 在 CacheStorage 之 外 ， 文 件 也 会 被 保存 在 浏览 器 缓存 中 。 
如 果 你 在 一 周 之 后 更 新 了 main.css， 并 打算 更 新 service worker， 让 其 重新 调用 cache. 
addALL([' /main.css'])， 那 么 该 文件 会 从 训 览 器 缓存 而 不 是 网 络 中 返 
这 并 非 CacheStorage 特有 的 问题 。HTTP 缓存 一 直 都 是 这 样 工作 的 。 如 今 ， 理 解 并 正确 实 
现 HTTP 缓存 和 过 去 一 样 重要 。 关 于 该 主题 的 入 门 介绍 ， 可 以 参见 Jake Archibald 的 文章 


“Caching best practices & max-age gotchas” 。 


3.8 ”小结 


本 章 完成 了 很 多 工作 ， 我 们 获得 了 一 个 强大 的 新 工具 CacheStorage， 并 学 习 了 如 何 创建 一 
个 可 以 针对 不 同 请 求 提 供 不 同 内 容 的 service worker。 我 们 理解 了 如 何 请 求 并 缓存 响应 ， 以 
及 如 何 为 service worker 的 安装 过 程 创建 依赖 。 最 后 ， 我 们 结合 了 所 有 这 些 新 工具 ， 为 用 
户 提供 了 一 个 现代 化 的 、 带 有 品牌 烙印 的 离线 版 本 首页 ( 见 图 3-4) 。 























回 




















BY https/www.gothamimperial.com 


GOWIIANA 


llelsllle Nllele 


倪 倪 公信 六 


Thereappears tobe aproblemwithyour connection. 


Comevisit us at LImperiallplaze, Gotham Cityfor Free WiFi. 














图 3-4: 哥 谭 帝 国 酒店 的 离线 品牌 页 面 
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我 们 可 以 更 进一步 ， 将 新 技能 与 第 2 章 内 容 结 合 起 来 ， 在 用 户 在 线 和 离线 的 情况 下 ， 都 返 
回 缓存 内 容 。 对 于 不 经 常 改变 的 内 容 ， 这 种 方式 是 非常 有 用 的 ， 可 以 显著 加 快 网 站 的 加 载 
速度 ， 并 能 节省 用 户 的 带宽 与 我 们 的 服务 器 成 本 一 一 但 是 在 这 里 我 就 不 作 展 开 了 。 

下 一 章 ， 我 们 将 从 所 有 这 些 兴 奋 点 中 脱离 出 来 ， 花 一 些 时 间 正 确 地 理解 service worker 的 
生命 周期 。 


我 们 在 熟悉 了 install 事件 之 后 ， 就 可 以 创建 安装 依赖 。 与 此 类 似 ， 在 理解 service worker 生 
命 周 期 的 其 他 部 分 之 后 ， 我 们 就 可 以 强 而 有 力 地 掌控 我 们 的 渐进 式 Web 应 用 了 。 
我 们 还 会 花 时 间 研 究 开 发 者 工具 ， 因 为 它们 可 以 使 开发 人 员 的 工作 变 得 轻松 。 在 下 一 章 的 
最 后 ， 作 为 负责 任 的 成 年 人 人， 我们 将 承担 责任 ， 学 习 管 理 缓存 。 这 将 会 相当 有 趣 。 

































































第 4 章 
service Worker 生 命 周期 和 缓存 管理 





现在 你 已 经 可 以 试 着 使 用 service worker 了 ， 可 能 你 会 注意 到 ， 它 的 行为 有 一 些 特殊 性 。 


有 时候， 在 加 载 页 面 时 ， 你 的 service worker 似乎 在 控制 页 面 ， 有 时 候 ， 你 却 需 要 先 刷 新 
页 面 (即使 service worker 处 于 激活 状态 ) ， 甚 至 在 一 些 场景 下 ， 你 更 改 了 service worker 
的 代码 之 后 ， 却 发 现 不 管 刷 新 页 面 多 少 次 ， 都 没有 发 生变 化 。 

在 第 2 章 中 ， 我 鼓励 你 打开 了 “Update on reload” 选 项 ， 它 让 你 在 每 次 页 面 刷新 后 能 够 立 
即 看 到 service worker 的 任何 更 改 。 然 而 ， 这 就 像 老 式 的 视频 游戏 作 浆 代码 一 样 ， 方 便 的 
处 理 方式 虽然 让 事情 变 得 简单 ， 但 并 不 能 代表 现实 世界 中 的 事物 是 如 何 运 作 的 。 

service worker 的 特殊 性 起 初 可 能 会 让 人 疑惑 ， 然 而 ,一 旦 你 了 解 了 service worker 的 状态 
变化 流程 ， 一 切 谜团 就 将 解 开 。 

本 章 探 索 并 使 用 了 浏览 器 中 的 许多 开发 者 工具 。 简 便 起 见 ， 本 章 将 假设 你 

在 使 用 Chrome 访问 应 用 。 我 们 的 代码 在 支持 service worker 的 所 有 浏览 器 中 
都 能 运行 ， 但 是 开发 者 工具 的 位 置 和 可 用 性 可 能 因为 浏览 器 类 型 和 浏览 器 版 

本 的 不 同 而 有 所 差异 。 
参见 4.8 节 获 取 更 多 细节 。 
















































































让 我 们 来 看 看 用 户 是 如 何 体验 我 们 的 应 用 的 。 
在 开始 之 前 ， 请 先 确保 你 的 代码 处 于 第 3 章 结 束 时 的 状态 。 在 命令 行 中 运行 下 列 命令 : 


git reset --hard 
git checkout ch04-start 


如 果 项 目 中 的 本 地 服务 器 还 没有 运行 ， 可 以 通过 npm start 命令 启动 。 
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把 serviceworker.js 中 的 代码 替换 成 下 列 代码 : 


self.addEventListener("install", function() { 
console.log("install"); 


}); 


self.addEventListener("activate", function() { 
console.log("activate"); 


}); 


self.addEventListener("fetch", function(event) { 
if (event.request.url.includes("bootstrap.min.css")) { 
console.log("Fetch request for:", event.request.url); 
event.respondwith( 
new Response( 
" .hoteL-sLogan {background: green!important;} nav {display:none}", 
{ headers: { "Content-Type": "text/css" }} 
) 
); 
} 
用 


这 段 代 码 现在 对 你 来 说 应 该 相当 熟悉 了 。 它 监听 了 install 和 activate 事件 (本 章 后 面 将 
对 它 进行 探究 ) ， 并 在 这 两 个 事件 被 触发 的 时 候 将 消息 记录 到 控制 台 。 它 还 监听 了 fetch 和 
件 ， 在 请 求 bootstrap.min.css 的 时 候 ， 把 响应 内 容 变 成 简单 的 样式 表 ， 其 中 把 页 眉 的 背 
景色 改 成 了 绿色 。 

你 自然 会 认为 ， 在 访问 我 们 的 应 用 时 ， 将 会 看 到 绿色 的 背景 。 在 验证 这 个 假设 之 前 ， 你 需 
要 确保 像 第 一 次 访问 的 用 户 那样 体验 这 个 应 用 。 
(1) 在 浏览 器 中 打开 应 用 (http:Wlocalhost:8443/) 。 

(2) 如果“Update on reload” 打 开 了 ， 将 其 关闭 (参见 2.5 节 中 的 “service worker 生命 周 

期 ”)。 


(3) 删除 所 有 已 经 注册 到 页 面 中 的 service worker。 在 Chrome 中 ， 这 可 以 使 用 在 开发 者 工具 
的 Application 面板 中 的 “Clear storage” 工 具 来 完成 。 参 见 4.8 市 以 获取 更 多 详情 。 


通过 删除 service worker， 你 就 可 以 确保 在 下 次 访问 时 ， 作 为 一 个 还 设 有 安装 service 
worker 的 新 用 户 来 访问 页 面 。 


刷新 页 面 。 页 面 看 起 来 应 该 如 图 4-1 所 示 。 
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@"@ [D cothamImperial Hotel X 


< CGC © localhost:8443 从 


ON 


leslie lelle 





[ 民 串 Elements Console Sources Network Timeline Profiles Application Security Audits 2 
© ip v Preserve log Show all messages 
install serviceworker, is:2 
Service Worker registered successfully with scope: http;//\localhost:8443, app,js;3 
activate Serviceworker.js:6 


> 











图 4-1: service worker 被 激活 ， 但 是 依然 没有 控制 页 面 





再 一 次 刷新 页 面 。 页 面 看 起 来 应 该 如 图 4-2 所 示 。 

















®@@ MD cothamImperial Hotel x 


< CO localhost:8443 六 


COWIANY 
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[R 加 | Elements Console Sources Network Timeline Profiles ” Application Security Audits :Xx 

© i vv 门 Preservelog Show all messages 

@ Fetch request for: https://maxcdn.bootstrapcdn. com/bootstrap/3.3.6/css/bootstrap.min.css Serviceworker.js:11 
Service Worker registered successfully with scope: http://localhost:8443, app,js:3 


> 











图 4-2: service worker 被 激活 ， 并 控制 了 页 面 


这 里 发 生 了 什么 ? 正如 你 在 图 4-1 中 可 以 清楚 看 到 的 那样 ，service worker 在 第 一 次 刷新 
之 后 ， 成 功 安装 并 激活 ， 但 是 没有 捕获 到 fetch 事件 ， 导 致 样式 表 没 有 发 生变 化 。 为 什么 
service worker 需要 二 次 刷新 才能 开始 监听 fetch 事件 ? 


要 搞 清楚 这 些 问题 ， 就 需要 理解 service worker 的 生命 周期 。 
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4.1 service worker 生 命 周 期 
当 页 面 注 册 一 个 新 的 service worker 的 时 候 ，service worker 会 经 历 多 个 状态 ( 见 图 4-3)。 


sine | installed/ activating activated redundant 
攻 Waiting 名 此 加 


4-3: service worker 生命 周期 

















installing (正在 安装 ) 


当 你 使 用 navigator.serviceWorker.register 注册 一 个 新 的 service worker 时 ，JavaScript 代 
码 就 会 被 下 载 、 解 析 ， 并 进入 安装 状态 。 如 果 安 装 成 功 ，service worker 就 会 进入 到 
installed (已 安装 ) 状态 。 但 是 ， 如 果 在 安装 过 程 中 发 生 了 错误 ， 脚 本 将 被 永久 地 放 
逐 到 redundant (废弃 ) 状态 的 深 调 中 〈 你 也 可 以 在 刷新 页 面 之 后 重新 注册 它 ) 。 


安装 过 程 的 生命 周期 是 可 以 延展 的 ， 只 需要 通过 监听 install 事件 ， 然 后 在 其 中 调 
用 waituntitL() 方法 ， 并 传人 一 个 promise 即 可 。 在 这 个 promise 完成 或 者 失败 之 前 ， 
service worker 是 不 会 认为 安装 完成 的 。 如 果 promise 失败 了 ， 整 个 安装 过 程 就 会 失败 ， 
从 而 导致 service worker 变 成 redundant (废弃 ) 状态 。 

















在 第 3 章 中 我 们 创建 了 一 个 依赖 关系 ，service worker 的 成 功 安装 依赖 于 静 
态 资源 的 成 功 缓存 。 通 过 在 install 事件 中 调用 waituntil， 使 得 service 
worker 在 变 成 installed 状态 之 前 ， 需 要 先 等 待 我 们 的 缓存 方法 返回 的 
promise 完成 ， 这 样 就 可 以 确保 ， 如 果 任 何 文件 没 有 被 缓存 ， 安 装 过程 就 会 
失败 ，service worker 马上 会 进入 redundant (废弃 ) 状态 。 



































instaLLed/waiting (已 安装 /等 待 中 ) 
一 且 service worker 安装 成 功 ， 就 会 进入 installed 状态 。 一 般 情况 下 ， 它 会 马上 进入 
activating (激活 中 ) 状态 ， 除 非 另 一 个 正在 激活 的 service worker 依然 在 控制 应 用 ， 
在 这 种 情况 下 它 会 维持 在 waiting (等 待 中 ) 状态。 
我 们 将 会 在 4.3 节 中 探究 waiting 状态 。 
activating (激活 中 ) 
在 service worker 激活 并 接管 应 用 之 前 ， 会 触发 activate 事件 。 和 正在 安装 状态 类 似 ， 
activating 状态 也 可 以 通过 调用 event.waituntil() 并 传人 promise 来 进行 扩展 。 
4.4 节 将 介绍 如 何 利 用 这 个 事件 来 管理 应 用 的 缓存 。 
activated (已 激活 ) 
一 且 service worker 激活 ， 它 就 准备 好 接管 页 面 并 监听 功能 性 事件 了 (例如 fetch 事件 )。 
service worker 只 能 够 在 页 面 开始 加 载 之 前 控制 页 面 。 这 意味 着 ， 如 果 页 面 在 service 
worker 激活 之 前 开始 加 载 ，service worker 是 不 能 够 控制 页 面 的 。 我 们 会 在 后 文中 的 
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“为 什么 service worker 不 能 在 页 面 开 始 加 载 之 后 控制 页 面 ? ”探索 其 中 的 原因 。 


redundant (废弃 ) 
如 果 service worker 在 注册 或 者 安装 过 程 中 失败 ， 或 者 被 新 的 版 本 替换 ， 会 被 置 为 
redundant 状态 。 处 于 这 种 状态 下 的 service worker 将 不 再 对 应 用 产生 任何 影响 。 


请 记 住 ，service worker 及 其 状态 是 独立 于 任何 一 个 浏览 器 窗口 或 者 标签 页 
的 。 这 意味 着 一 旦 service worker 处 于 activated 状态 ， 它 就 将 保持 在 这 个 状 
态 。 即 使 用 户 打 开 第 二 个 标签 页 ， 尝 试 再 次 注册 这 个 service worker 也 是 如 
此 。 如 果 浏 览 器 检测 到 你 试图 广 册 的 service worker 已 经 激活 ， 就 不 会 再 一 



























































次 安装 了 。 
可 以 确信 ， 在 一 个 service worker 的 生命 周期 中 ， 安 装 和 激活 事件 都 只 会 运 
行 一 次 。 














进一步 熟悉 了 service worker 经 历 的 各 种 状态 后 ， 让 我 们 尝试 理解 为 什么 在 第 一 份 示 例 代 
码 中 ，service workerr 在 第 二 次 刷新 之 前 都 没有 改变 应 用 的 样式 。 

当 用 户 第 一 次 访问 我 们 的 站 点 (我们 通过 删除 service worker 后 刷新 页 面 的 方式 进行 了 模 
拟 ) 时 ， 应 用 会 注册 service worker。service worker 的 文件 将 会 被 下 载 ， 然 后 开始 安装 。 
install 事件 被 调度 ， 然 后 触发 了 我 们 的 函数 ， 将 调用 的 时 机 记录 到 控制 台中 。service 
worker 随后 进入 installed 状态 ， 然 后 立即 变 成 activating 状态 。 此 时 我 们 的 另 一 个 函 
数 被 触发 ， 这 次 轮 到 了 activate 事件 把 状态 记录 到 控制 台中 。 最 后 ，service worker 进入 
activated 状态 。 现 在 它 已 经 激活 了， 并 准备 好 在 其 控制 范围 内 控制 页 面 。 

不 幸 的 是 ， 当 service worker 正在 安装 的 时 候 ， 我 们 的 页 面 已 经 开始 加 载 并 泻 染 了 。 这 意 
味 着 即使 service worker 变 成 了 active 状态 ， 也 不 能 够 控制 页 面 了 。 只 有 当 我 们 刷新 页 面 
之 后 ， 我 们 的 激活 态 service worker 才能 控制 它 。 此 时 ，service worker 既是 激活 的 也 能 控 
制 页 面 ， 并 且 可 以 监听 和 操控 fetch 事件 。 


为 什么 service worker 不 能 在 页 面 开 始 加 载 之 后 控制 页 面 ? 

让 我 们 来 考虑 另 一 种 可 能 。 假 设 一 个 service worker 负责 检测 视频 文件 是 否 
加 载 太 慢 ， 并 提供 其 他 镜像 服务 器 的 相同 视频 链接 作为 代替 。 这 个 service 
worker 会 拦截 所 有 视频 文件 的 请 求 ， 然 后 返回 所 请 求 的 视频 或 者 包含 了 镜 
像 站 点 链接 的 JSON 文件 。 这 个 service worker 还 会 拦截 app.js 的 请 求 ， 并 
提供 代替 版 本 的 app-sw.js。 其 中 后 者 可 以 显示 视频 响应 ， 并 从 JSON 响应 中 
演 染 一 份 链接 列表 。 现 在 设想 一 下 ， 如 果 允 许 service worker 控制 那些 加 载 
后 才 注 册 service worker 的 页 面 会 发 生 什 么 。 如 果 在 service worker 获得 控制 
权 之 前 ， 页 面 下 载 了 未 修改 的 app.js 文件 ， 然 后 在 请 求 视频 的 时 候 开 始 接收 
service worker 返回 的 JSON 文件 ， 会 发 生 什么 呢 ? app.js 并 不 知道 如 何 处 理 
这 些 响 应 ， 然 后 整个 页 面 可 能 会 月 并。 

通过 确保 每 个 页 面 仅 由 一 个 service worker 全 程控 制 ( 从 开始 加 载 到 关闭 )， 
service worker 就 能 帮 我 们 避免 这 些 意 外 的 问题 。 
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4.2 ”service worker 的 生命 周期 与 waitUntiL 的 重 
要 性 

一 且 service worker 成 功 安装 并 激活 ， 会 发 生 什 么 呢 ? 既然 service worker 不 是 直接 绑 定 在 

任何 标签 页 或 者 窗口 上 ， 并 且 可 以 随时 响应 事件 ， 这 是 否 意味 着 它 一 直 在 运行 呢 ? 

答案 是 否定 的 。 浏 览 器 没有 让 当前 已 注册 的 所 有 service worker 一 直 保 持 运行 的 状态 。 如 


果 这 样 做 ， 随 着 越 来 越 多 的 网 站 注册 越 来 越 多 的 service worker， 性 能 将 很 快 受到 影响 ， 所 
有 的 service worker 都 必须 保持 一 直 运 行 。 


代替 方案 是 ，service worker 的 生命 周期 直接 与 它 所 处 理 的 事件 的 执行 联系 在 一 起 。 当 某 个 
service worker 作用 域 下 的 事件 被 触发 ，service worker 将 被 唤醒 ， 处 理事 件 ， 然 后 终止 。 
换 名 话说 ， 当 用 户 访问 网 站 时 ， 浏 览 器 就 会 开始 控制 service worker， 一 旦 处 理 完 来 自 页 面 
的 事件 ， 它 就 终止 了 。 如 果 稍 后 发 生 了 另 一 个 事件 ，service worker 将 会 再 次 启动 ， 并 在 完 
成 后 立即 终止 。 


如 果 我 们 在 service worker 的 事件 处 理 代 码 中 异步 调用 了 一 些 代 码 ， 会 发 生 什 么 呢 ? 举 个 
例子 ， 让 我 们 看 看 下 面 这 个 push 事件 处 理 方法 。 第 10 章 会 详细 讨论 push 事件 ， 现 在 你 只 
需要 知道 ， 在 服务 器 推送 销 息 给 用 户 时 ， 它 将 会 被 触发 〈 甚 至 可 能 会 发 生 在 应 用 没有 运行 
的 时 候 ) : 
self.addEventListener("push", function() { 
fetch("/updates") 
.then(function(response) { 
return self.registration.showNotification(response. text()); 


]); 
}); 


当 push 事件 触发 的 时 候 ， 上 述 示例 代码 中 的 事件 监听 器 将 会 尝试 从 服务 端 fetch 更 新 ， 然 
后 一 旦 接收 到 响应 ， 就 会 向 用 户 显 示 这 些 更 新 的 通知 。 


但 是 这 段 代 码 有 个 问题 。 当 fetch 请 求 去 异步 查询 更 新 的 时 候 ， 事 件 监听 器 已 经 停止 执行 
了 。 一 旦 事件 结束 ， 在 响应 返回 之 前 ，service worker 就 会 被 浏览 器 终止 。 这 就 会 导致 没 法 
处 理 响应 和 显示 通知 了 。 


我 们 怎样 才能 在 让 浏览 器 终止 service worker 之 前 ， 让 service worker 等 待 某 件 事 情 的 发 生 
呢 ? 答案 不 言 而 喻 。 正 如 我 们 已 经 确定 的 那样 ，service worker 的 生命 周期 是 和 它 所 处 理 的 
事件 执行 直接 相关 的 ， 所 以 我 们 所 需要 做 的 就 是 通过 waituntil 方法 扩展 其 事件 的 执行 : 


self.addEventListener("push", function() { 
event .waitUntil( 
fetch("/updates") 
.then(function() { 
return self.registration.showNotification("New updates"); 
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这 段 示 例 代码 告知 push 事件 等 待 我 们 传人 的 一 个 promise 完成 或 者 失败 ， 才 能 认为 该 事件 
已 完成 。 这 意味 着 service worker 的 生命 周期 也 得 到 了 延长 。 最 终 的 结果 是 ，service worker 
会 一 直 停 留 ， 直 到 fetch 和 showNotification 调用 都 完成 为 止 。 


4.3 更 新 service worker 

下 面 看 看 尝试 更 新 现 有 的 service worker 会 发 生 什么 。 

修改 serviceworker.js 文件 ， 将 设置 的 头 部 背景 色 从 原本 的 绿色 (green) 改 为 红色 (red)。 
你 的 fetch 事件 监听 器 现在 应 该 看 起 来 像 这 样 ， 


self.addEventLi. stener("fetch", function(event) { 
if (event.request.url.includes("bootstrap.min.css")) { 
console.log("Fetch request for:", event.request.url); 
event.respondwith( 
new Response( 
".hotel-slogan {background: red!important;} nav {display:none}", 
{ headers: { "Content-Type": "text/css" }} 
) 
); 
} 
]); 


然后 刷新 页 面 ， 一 次 ， 两 次 ， 三 次 。 

你 可 能 会 感到 惊讶 ， 你 对 service worker 所 做 的 修改 没有 影响 到 页 面 ， 背 景 依然 是 绿色 的 。 
发 生 了 什么 呢 ? 既然 背景 是 绿色 的 ， 那 么 页 面 显 然 是 由 service worker 所 控制 的 ， 然 而 
service worker 文件 却 清 楚 地 描述 了 它 是 红色 的 。 

我 们 可 以 通过 查看 Chrome 开发 者 工具 中 的 Application 一 Service Workers 部 分 ， 来 理解 这 
段 示 例 代 码 中 发 生 的 事情 ( 见 图 4-4)。 
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图 4-4: 新 的 service worker 正 等 待 当 前 激活 的 service worker 释放 控制 权 
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正如 你 在 图 中 看 到 的 那样 ， 页 面 上 注册 了 两 个 service worker， 但 是 只 有 其 中 的 一 个 在 控制 
页 面 。 旧 的 service worker (绿色 背景 色 ) 是 激活 的 ， 而 新 的 service worker (红色 背景 色 ) 
仍然 处 于 等 待 状态 。 


每 当 页 面 加 载 一 个 激活 的 service worker， 就 会 检查 service worker 脚本 的 更 新 。 如 果 文 件 
在 当前 的 service worker 注册 之 后 发 生 了 修改 ， 新 的 文件 就 会 被 注册 和 安装 。 安 装 完成 后 ， 
tin service worker， 而 是 会 保持 在 waiting 状态 。 它 将 一 直 停 留 在 这 个 状 

态 ， 直 到 service worker 作用 域 中 的 每 个 标签 页 和 窗口 关闭 ， 或 者 导航 到 一 个 不 在 其 控制 
范围 内 的 页 面 。 只 有 在 当前 激活 的 service worker 控制 的 页 面 全 部 关闭 之 后 ， 这 个 旧 的 泊 
活 的 service worker 才 会 进入 废弃 状态 ， 然 后 新 的 service worker 才 会 激活 。 


这 就 解释 了 为 何 我 们 的 应 用 背景 没有 发 生 改 变 。 尝 试 关 闭 标签 页 ， 然 后 重新 打开 ， 或 者 导 
航 到 一 个 不 同 的 网 站 ， 然 后 点 击 返回 按钮 。 这 样 应 该 就 能 够 让 旧 的 service worker 变 成 废 
弃 状 态 ， 并 且 激 活 新 的 service worker， 然 后 背景 色 最 终 将 会 变 成 红色 。 


为 什么 安装 完成 的 新 service worker， 在 接管 控制 并 成 为 激活 的 service worker 
之 前 ， 必 须 等 待 作用 域 中 的 所 有 页 面 关 闭 呢 ? 

假设 有 两 个 打开 的 标签 页 是 由 同一 个 service worker 控制 的 。 现 在 ， 如 果 刷 新 
第 一 个 标签 页 ， 下载 一 个 新 的 service worker 并 激活 它 ， 会 发 生 什么 呢 ?” 第 
二 个 页 面 本 来 加 载 了 旧 的 service worker， 突 然 被 男 外 一 个 service worker 所 
控制 了 。 这 样 可 能 会 导致 很 多 意 想不到 的 问题 ， 比 如 我 们 在 “为 什么 service 
worker 不 能 在 页 面 开始 加 载 之 后 控制 页 面 ? ”中 探索 的 那个 问题 。 

但 是 ， 在 新 的 service worker 安装 完成 后 ， 为 什么 不 能 让 新 的 service worker 
控制 新 的 页 面 ， 同 时 让 旧 的 service worker 控制 旧 的 页 面 呢 ? 为 什么 浏览 器 
不 能 跟踪 多 个 service worker 呢 ? 为 什么 所 有 的 页 面 都 必须 由 单一 的 service 
worker 所 控制 呢 ? 

我 们 来 探索 这 种 场景 引发 的 一 种 潜在 灾难 。 设 想 这 样 一 种 场景 : 你 发 布 了 一 
个 新 版 本 的 service worker， 这 个 service worker 的 install 事件 会 从 缓存 中 
删除 user-data.json 文件 ， 六 次 加 users.json 作为 代替 ， 并 且 修 改 fetch 事件 ， 
让 其 在 请 求 用 户 数据 的 时 候 ， 返 回 新 的 文件 。 如 果 多 个 service worker 分 别 
控制 了 不 同 的 页 面 ， 旧 service worker 控制 的 页 面 可 能 会 在 缓存 中 搜索 旧 的 
user-data.json 文件 ， 但 是 这 个 文件 已 经 被 删除 了 ， 会 导致 应 用 崩 潢 。 

通过 确保 所 有 打开 的 标签 页 从 开始 加 载 到 关闭 都 由 同一 个 service worker 所 
控制 ， 就 可 以 避免 这 样 的 问题 。 这 使 得 在 任何 时 间 都 可 以 知道 哪个 service 
worker 在 控制 着 页 面 。 
























































































































































4.4 为 什么 需要 管理 缓存 


现在 我 们 已 经 了 解 service worker 的 生命 周期 ， 让 我 们 回 到 应 用 中 ， 看 看 当 需 要 更 新 应 用 
时 会 发 生 什么 。 
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假设 我 们 决定 修改 离线 首页 的 内 容 。 如 果 我 们 更 新 sw-index.html 文件 的 内 容 ， 如 何 让 
service worker 知道 我 们 需要 下 载 新 版 本 的 文件 ， 并 存储 在 CacheStorage 中 呢 ? 


在 开始 之 前 ， 我 们 先 在 命令 行 中 运行 下 列 命令 ， 把 serviceworker.js 恢复 到 第 3 章 结束 时 的 
状态 : 


git reset --hard 
git checkout ch04-start 


serviceworker.js 文件 的 内 容 应 该 看 起 来 像 这 样 : 


var CACHE_NAME = "gih-cache"; 

var CACHED_URLS = [ 
"/index-offline.html", 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", 
"/css/gih-offline.css", 
"/img/jumbo-background-sm.jpg", 
"/img/Logo-header .png" 

]; 








tt 





self.addEventListener("install", function(event) { 
event .waitUntil( 
caches.open(CACHE_NAME).then(function(cache) { 
return cache.addAlL(CACHED_URLS); 
}) 
); 
]); 


self.addEventListener("fetch", function(event) { 
event.respondwith( 
fetch(event.request).catch(function() { 
return caches.match(event.request).then(function(response) { 
if (response) { 
return response; 
} else if (event.request.headers.get("accept").includes("text/html")) { 
return caches.match("/index-offline.html"); 
} 
]); 
}) 
); 
]); 


请 记 住 ， 我 们 的 service worker 会 在 安装 阶段 下 载 并 缓存 所 需要 的 文件 。 如 果 和 希望 它 再 次 下 
载 并 缓存 某 些 文件 ， 就 需要 触发 另 一 个 安装 事件 。 正 如 我 们 在 4.1 节 中 看 到 的 那样 ，service 
worker 文件 的 任何 修改 都 会 导致 下 次 访问 应 用 的 任何 页 面 时 ， 安 装 新 的 service worker。 


























现在 你 已 经 了 解 service worker 的 生命 周期 ， 可 以 随时 打开 “Update on reload” 
开关 以 方便 开发 。 








在 serviceworkerjs 文件 中 ， 把 第 一 行 的 缓存 名 称 改 成 qih-cache-v2。 现 在 第 一 行 应 该 看 起 
来 如 下 所 示 : 











service worker 生 命 周期 和 缓存 管理 | 41 


var CACHE_NAME = "gih-cache-v2"; 
通过 给 缓存 名 称 添加 版 本 号 ， 并 在 每 次 文件 修改 时 自 增 它 ， 可 以 达成 两 个 目的 。 


(1) 任何 关于 service worker 文件 的 修改 ， 即 使 是 在 缓存 版 本 号 中 改变 一 位 数字 这 样 的 微小 
变化 ， 都 可 以 让 训 览 器 知道 ， 是 时 候 安 装 新 的 service worker 来 奉 代 旧 的 激活 service 
worker 了 。 这 将 触发 一 个 新 的 install 事件 ， 并 导致 新 文件 下 载 并 存储 到 缓存 中 。 

(2) 它 为 每 一 个 版 本 的 service worker 都 创建 了 一 份 单独 的 缓存 ( 见 图 4-5)。 这 一 点 很 重要 ， 
因为 即使 我 们 已 经 更 新 了 缓存 ， 在 用 户 关闭 所 有 页 面 之 前 ， 旧 的 service worker 依然 是 
激活 的 。 旧 的 service worker 可 能 会 用 到 缓存 中 的 某 些 文件 ， 而 这 些 文件 又 是 可 以 被 新 
的 service worker 所 修改 的 。 通 过 让 每 个 版 本 的 service worker 拥有 自己 的 缓存 ， 就 可 以 
确保 不 会 出 现 意料 之 外 的 情况 。 
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4-5: 


两 个 service worker， 各 自 拥有 属于 自己 的 缓存 


我 们 选择 了 版 本 号 作为 缓存 的 名 称 (例如 gih-cache-v2 和 gih-cache-v3)， 


这 仅仅 是 为 了 开发 的 舒适 性 和 可 读 性 。 浏 
gih-cache-v3 旧 ， 只 知道 它们 是 不 同 的 缓存 。 我 们 也 可 以 简单 地 将 其 
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cache-sierra 和 nevada-store。 


从 技术 上 讲 ，gih-cache-v2 只 是 我 们 的 缓存 版 本 号 名 称 ， 但 我 们 还 经 常 使 用 
缓存 名 词 指 代 service worker 的 版 本 。 例 如 ， 我 们 可 以 把 名 为 gih-cache-v2 的 
缓存 名 用 在 service worker 版 本 2 中 。 一 旦 你 决定 为 每 个 service worker 版 本 维 





A 








护 








单独 的 缓存 版 本 ， 使 用 相同 的 名 词 来 称呼 它们 可 以 让 事情 变 得 更 简单 。 


4.5 ”缓存 管理 与 清除 旧 绥 存 


览 器 并 不 知道 gih-cache-v2 比 














命名 为 




















通过 给 缓存 和 service worker 添加 版 本 ， 我 们 能 够 实现 一 套 强 大 的 系统 ， 其 中 每 个 版 本 


的 service worker 都 可 以 只 依赖 于 其 专用 缓存 中 的 文 从 








EF。 我 们 可 以 随时 更 新 service worker 


或 者 缓存 中 的 文件 ， 并 确保 不 会 以 意 想 不 到 的 方式 影响 到 用 户 。 别 忘 了 ， 你 可 能 刚刚 把 


service worker 的 版 本 更 新 到 327， 但 是 你 的 用 户 安 装 的 service worker 版 本 可 能 是 





122。 你 


真 的 需要 确保 你 发 布 的 每 个 service worker 版 本 都 要 修改 并 保留 一 遍 缓存 文件 吗 ? 
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这 正好 产生 了 一 个 问题 。 每 次 我 们 更 新 service worker， 都 在 用 户 设备 上 创建 了 一 份 新 的 缓 
存 ， 把 缓存 弄 得 很 杂乱 。 不 仅 如 此 ， 我 们 可 能 最 终 存 储 了 327 份 标志 图 片 ， 以 及 华丽 的 高 分 
辩 率 封面 图 。 不 久之 后 ， 浏 览 器 就 会 干涉 我 们 ， 让 我 们 知道 ， 存 储 容量 已 经 达到 上 限 了 。 





























存储 限制 
对 于 CacheStorage 的 管理 ， 每 个 浏览 器 的 行为 都 有 所 不 同 ， 包 括 如 何 给 每 个 网 站 分 配 
缓存 空间 ， 以 及 如 何 清除 旧 的 缓存 条 目 。 不 同 的 浏览 器 、 浏 览 器 版 本 号 、 设 备 ， 其 至 
随 着 时 间 推移 (设备 的 剩余 空间 会 发 生变 化 ) ， 都 会 影响 分 配给 你 的 站 点 的 空间 。 
除了 每 个 站 点 ( 即 每 个 源 ) 的 存储 限制 之 外 ， 大 多 数 浏览 器 还 会 设置 一 个 所 有 缓存 的 
大 小 限制 。 当 缓存 超出 了 这 个 限制 之 后 ， 浏 览 器 就 会 删除 最 久之 前 访问 的 网 站 缓存 
(也 称 为 最 近 最 少 使 用 ，least recently used) 。 
浏览 器 不 会 仅 删除 站 点 的 部 分 缓存 。 要 么 删除 你 网 站 的 所 有 缓存 ， 要 么 不 删除 任何 内 
容 。 这 将 确保 你 的 站 点 不 会 处 于 一 种 不 可 预测 的 部 分 缓存 状态 。 











我 们 的 service worker 要 学 会 在 浏览 器 中 成 为 一 名 良好 公民 ， 不 仅 要 创建 缓存 ， 还 应 该 负 
责 地 处 理 不 再 需要 使 用 的 旧 缓 存 资源 。 
在 解决 这 个 问题 之 前 ， 我 们 需要 熟悉 caches 对 象 的 两 个 新 方法 。 
caches .delete(cacheName) 
接收 一 个 缓存 名 字 作 为 第 一 个 参数 ， 并 删除 对 应 的 缓存 。 
caches .keys() 
一 个 获取 所 有 缓存 名 称 的 简便 方法 。 返 回 一 个 promise， 其 完成 的 时 候 会 得 到 一 个 包含 
缓存 名 称 的 数组 。 
通过 组 合 使 用 这 两 个 方法 ， 就 可 以 创建 代码 来 删除 所 有 缓存 或 者 某 些 缓存 。 例 如 ， 如 果 想 
删除 所 有 缓存 ， 可 以 使 用 下 列 代码 : 
caches.keys().then(function(cacheNames) { 
cacheNames.forEach(function(cacheName) { 
caches.delete(cacheName); 


}); 
3 


接 下 来 看 看 如 何 用 此 来 管理 缓存 。 

适用 于 这 个 应 用 的 内 容 ， 未 必 适 合 你 的 现实 情况 。 

虽然 我 决定 将 哥 谭 帝国 酒店 的 所 有 静态 资源 存储 在 一 份 缓存 中 (对 于 每 个 版 
本 ), 但 是 你 可 以 针对 你 的 应 用 定制 一 套 不 同 的 结构 。 举 个 例子 ， 你 可 能 会 
为 一 些 不 频繁 更 改 的 文件 (例如 第 三 方 库 、 标 志 图 案 等 ) 单独 保留 一 份 组 
存 ， 为 那些 随 每 次 发 布 而 修改 的 文件 使 用 另 一 份 缓存 。 如 果 确 实 如 此 ， 请 务 
必修 改 此 处 所 描述 的 模式 。 
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任何 时 候 ， 我 们 的 应 用 最 多 需要 两 份 缓存 : 一 份 用 于 当前 激活 的 service worker， 另 一 份 用 
于 正在 安装 但 尚未 激活 的 service worker (如 果 存 在 的 话 )。 任 何 属于 废弃 service worker 的 
缓存 也 是 废弃 的 。 


让 我 们 将 目标 分 解 ， 并 放 进 service worker 生命 周期 中 。 


() 每 次 安装 service worker， 我 们 都 创建 一 份 新 的 缓存 。 
(2) 当 新 的 service worker 激活 的 时 候 ， 就 可 以 安全 删除 过 去 的 service worker 创建 的 所 有 
缓存 。 


我 们 的 代码 已 经 完成 了 步骤 1， 只 需要 添加 步骤 2， 我 们 的 service worker 就 可 以 打扫 自己 
家 了 。 幸 运 的 是 ， 我 们 已 经 熟知 了 做 这 件 事情 的 绝 佳 机 会 一 activate 事件 。 


在 现 有 service worker 的 基础 上 ， 我 们 添加 一 个 新 的 事件 监听 器 ， 监 听 activate 事件 。 


在 serviceworker.js 中 ， 把 CACHE_NAME 变量 修改 成 gih-cache-v4， 然 后 在 文件 底部 添加 下 列 
代码 : 


self.addEventListener("activate", function(event) { 
event.waitUntil( 
caches.keys().then(function(cacheNames) { 
return Promise.all( 
cacheNames .map(function(cacheName) { 
if (CACHE_NAME !== cacheName && cacheName.startsWith("gih-cache")) { 
return caches.deLete(cacheName ) ; 


























我 们 的 代码 现在 监听 了 另 一 个 事件 activate。 当 一 个 已 安装 /等待 中 的 service worker 
准备 好 激活 ， 并 替代 旧 的 激活 service worker 的 时 候 ， 就 会 调用 这 个 事件 。 在 这 个 阶段 ， 它 
所 需要 的 文件 已 经 成 功 缓存 了 。 但 在 我 们 宣称 新 的 service worker 激活 之 前 ， 需 要 删除 所 
有 旧 的 缓存 ， 这 些 缓存 是 旧 的 service worker 用 到 的 。 


让 我 们 逐 行 检查 activate 事件 的 代码 。 


首先 我 们 使 用 waituntil 来 扩展 activate 事件 。 本 质 上 讲 ， 我 们 让 service worker 完成 激活 
之 前 ， 先 等 待 我 们 删除 所 有 的 旧 缓 存 。 我 们 通过 给 waituntil 传 入 promise 来 实现 这 一 点 。 
创建 promise 的 代码 一 开始 调用 了 caches.keys()。 这 个 方法 返回 一 个 promise， 当 它 完成 的 
时 候 会 提供 一 个 数组 ， 其 中 包含 了 我 们 在 应 用 中 创建 的 所 有 缓存 的 名 称 。 我 们 需要 拿 到 这 
个 数组 ， 然 后 创建 一 个 promise， 只 有 完成 迭代 数组 中 的 每 个 缓存 ， 才 能 解决 这 个 promise。 
要 实现 这 一 点 ， 我 们 可 以 使 用 Promise.all() 把 所 有 的 promsie 包 夺 在 单个 promise 中 。 


Promise.all() 接收 一 个 promise 数组 ， 并 返回 一 个 单独 的 promise， 一 旦 数 
组 中 的 所 有 promise 都 完成 ， 这 个 单独 的 promise 也 会 完成 。 如 果 数 组 中 的 
任何 一 个 promise 失败 ，Promise.all() 创建 的 promise 也 会 失败 。 反 之 ， 如 
果 所 有 promise 都 完成 ， 这 个 单独 的 promise 也 会 完成 。 
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接 下 来 ， 我 们 创建 了 一 个 promise 数组 ， 将 其 传递 给 Promise.all()。 我 们 是 这 样 创建 
的 : 基于 cacheNames 数组 ， 使 用 Array.map() 方法 ， 给 每 个 缓存 名 称 创建 一 个 对 应 的 
promise 一 一 这 个 promise 会 删除 对 应 名 称 的 缓存 ， 然 后 3 


要 详细 了 解 如 何 使 用 Array.map() 来 给 每 个 缓存 名 称 创 建 promise， 请 参见 后 文 的 “为 
Promise.all() 创建 一 个 promise 数组 ”。 


拿 到 这 个 删除 缓存 的 promise 数组 之 后 ， 我 们 将 其 传递 给 Promise.aLL()，Promise.atLL() 
转 而 返回 一 个 单独 的 promise， 然 后 传 给 event .waitUntil()。 


现在 我 们 还 没 介绍 的 唯一 一 行 是 if 语句， 其 中 包含 了 我 们 的 caches.delete() 调用 。 这 个 
语句 负责 确保 只 会 删除 同时 符合 下 列 条 件 的 缓存 内 容 : 


(1) 缓存 名 称 不 等 于 当前 激活 的 缓存 名 称 ; 
(2) 缓存 名称 以 gih-cache 开头 。 


第 一 个 条 件 确保 我 们 不 会 删除 刚刚 创建 的 新 缓存 。 第 二 个 条 件 则 检查 了 所 有 service worker 
缓存 名 称 的 任意 前 级 。 te ge 与 service 
worker 无 关 的 缓存 。 


尽管 实现 的 事情 很 简单 ， 但 是 由 于 这 段 代 码 使 用 了 链 式 pe 和 一 些 不 太 常 用 的 方法 ， 
看 起 来 像 是 整 本 书 中 比较 复杂 的 代码 。 我 们 通过 伪 代 码 来 总 结 整个 activate 事件 监听 器 ， 
或 者 会 更 容易 掌握 : 


监 昕 activate 事 件 : 
在 声明 service worker 激 活 成 功 之 前 ， 需 要 等 待 下 列 内 容 完 成 
如 果 下 列 所 有 事情 都 能 成 功 完成 : 
对 于 每 个 缓存 名 称 : 
检查 缓存 名 称 ， 如 果 不 等 于 当前 缓存 名 
并 且 名 称 以 gtih-cache 开 头 : 
删除 缓存 。 

































































为 Promise.all() 创建 一 个 promise 数组 


当 我 们 想 要 传递 一 个 promise， 而 这 个 promise 等 到 所 有 其 他 promise 全 部 完成 的 时 候 
才 会 完成 自身 ,这 时 可 以 使 用 Promise.all() 方法 。 


Promise.all() 接收 一 个 promise 数组 ， 并 返回 一 个 单独 的 promise。 这 个 promise 仅 在 
接收 的 所 有 promise 全 部 完成 的 时 候 ， 才 能 完成 自身 。 如 果 数 组 中 的 任何 promise 失败 
了 ，Promise.all() 返回 的 promise 也 会 失败 。 

我 们 可 以 使 用 Array.map() 来 基于 任何 其 他 数组 (例如 上 述 例子 中 提 到 的 缓存 名 称 数 
组 ) 创建 对 应 的 promise 数组 。 我 们 可 以 通过 给 数组 的 map() 方法 传 入 一 个 回调 函数 
来 实现 这 一 点 ， 这 个 回调 函数 接收 数组 中 的 单个 元 素 ， 并 返回 一 个 新 的 promise。 

下 面 的 例子 是 一 个 简化 的 版 本 : 


var values = [true，faLse，true，true]; 
Promise.alll 
values.map(function(val) { 
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if (val === true) { 
return Promise.resolve(); 
} elsef 
return Promise.reject(); 
} 
}) 
) 
.then(function() {console.log("Everything is true");}) 
.catch(function() {console.log("Not everything is true");}); 


这 段 代 码 为 一 个 布尔 值 数组 创建 了 一 个 新 数组 ， 其 中 包含 了 四 个 promise， 其 中 的 三 个 
会 成 功 ， 但 有 一 个 将 会 失败 。 这 将 导致 Promise.all 返回 的 promise 整个 失败 ， 并 触发 
执行 catch 块 的 代码 。 


4.6 重用 已 缓存 的 响应 


带 版 本 号 缓存 实现 ， 为 我 们 提供 了 一 个 非常 灵活 的 方式 来 控制 缓存 ， 并 保持 最 新 。 但 是 ， 
如 果 我 们 仔细 研究 它 ， 可 能 会 发 现 其 内 在 实现 是 低 效 的 。 


每 当 我 们 创建 一 个 新 的 缓存 ， 会 使 用 cache.add() 或 者 cache.addAtLL() 来 缓存 应 用 需要 的 所 
有 文件 。 但 是 ， 如 果 用 户 已 经 在 本 地 拥有 了 cache-v1 缓存 ， 而 我 们 现在 要 创建 cache-v2， 会 
发 生 什 么 呢 ? 我 们 请 求 并 放置 到 cache-v2 中 的 某 些 文件 ， 已 经 存在 于 cache-v1 中 。 如 果 我 
们 知道 这 些 文件 是 永远 不 会 改变 的 ， 就 浪费 了 宝贵 的 带宽 和 时 间 来 从 网 络 上 再 次 下 载 它们 。 


如 果 我 们 创建 了 一 个 新 的 缓存 ， 首 先 遍 历 一 份 不 可 变 文 件 的 列表 (其 中 包含 了 从 不 改变 的 文 
件 ， 例 如 bootstrap.3.7.7.min.css 或 者 styLe-v355.css)， 然 后 从 现 有 缓存 中 寻找 它们 ， 并 直 
接 复 制 到 新 的 缓存 中 ， 会 怎么 样 ? 完成 这 项 工作 后 ， 我 们 就 可 以 继续 使 用 cache.add() 或 者 
cache.addALL() 来 获取 剩 下 的 文件 (包括 在 旧 缓 存 中 找 不 到 的 不 可 变 文件 ， 以 及 可 变 的 文件 )。 


var immutableRequests = [ 
"/fancy_header_background.mp4" ， 
"/vendor/bootstrap/3.3.7/bootstrap.min.css", 
"/css/style-v355.css" 

]; 

var mutableRequests = [ 
"app-settings.json", 
"index.html" 


起 






















































































self.addEventListener("install", function(event) { 
event .waitUntil( 
caches.open("cache-v2").then(function(cache) { 
var newImmutabLeRequests = []; 
return Promise.all( 
immutableRequests.map(function(url) { 
return caches.match(urL) .then(function(response) { 
if (response) { 
return cache.put(url, response); 
} else { 








newImmutabLeRequests.push(urL); 
return Promise.resolve(); 


} 
]); 
}) 
).then(function() { 
return cache.addAll(newImmutableRequests.concat(mutableRequests)); 


}); 


这 段 代 码 把 需要 的 资源 分 成 了 两 个 数组 。 


(1) immutableRequests 中 包含 了 我 们 知道 永 不 改变 的 资源 URL。 这 些 资 源 可 以 安全 地 在 缓 


存 之 间 复 制 。 
(2) mutableRequests 中 包含 了 每 次 创建 新 缓存 时 ， 我 们 都 要 从 网 络 中 请 求 的 URL。 





首先 ， 我 们 的 install 事件 会 遍历 所 有 的 immutabLeRequests， 并 且 在 所 有 现 有 的 缓存 中 寻 
找 它们 。 寻 找到 的 任何 资源 ， 都 会 使 用 cache.put 复制 到 新 的 缓存 中 。! 而 没有 寻找 到 的 资 


源 ， 会 被 放 入 到 newImmutableRequests 数组 中 。 


一 旦 所 有 的 请 求 都 检查 完毕 ， 代 码 就 会 使 用 cache.addALL() 来 缓存 mutableRequests 和 


newImmutableRequests 中 的 所 有 URL。 


在 大 部 分 service worker 中 ， 这 种 模式 都 是 实用 的 。 为 了 减少 你 的 代码 输入 
量 ， 我 给 cache.addALL() 创建 了 一 个 赫 代 方法 ， 称 为 cache.adderaLL()， 简 
化 了 上 述 的 模式 。 


importScripts("cache.adderall.js"); 








self.addEventListener("install", function(event) { 
event.waitUntil( 
caches .open("cache-v2").then(function(cache) { 
return adderall.addAll(cache, IMMUTABLE_URLS, MUTABLE_URLS) 
}) 
) 
}); 


你 可 以 在 线 上 找到 关于 cache.adderall() 的 更 多 信息 。 


4.7 配置 服务 器 以 提供 正确 的 响应 头 部 


由 于 service worker 文件 在 每 次 加 载 的 时 候 都 会 进行 检查 ， 你 应 该 修改 你 的 服务 器 配置 ， 提 
供 一 个 较 短 的 过 期 时 间 头 部 ( 即 1 到 10 分 钟 )。 如 果 你 给 它 一 个 很 长 的 过 期 时 间 ， 浏 览 器 


就 不 会 检查 它 的 变化 ， 导 致 不 能 发 现 service worker 的 新 版 本 或 者 需要 缓存 的 新 文件 。 























与 只 需要 提供 URL 的 cache.add 不 同 ，cache.put 不 会 发 起 另 一 个 网 络 请 求 ， 
缓存 的 响应 。 





注 1: cache.put 接收 一 个 键 值 对 (例如 URL 作为 键 ,response 对 象 作为 值 ) ,然后 在 缓存 中 创建 一 个 新 的 条 目 。 














已 经 包含 了 需要 
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想象 一 下 ， 如 果 你 的 service worker 总 是 从 缓存 中 提供 checkoutjs， 然 后 你 意外 地 发 布 了 一 
个 有 bug 的 文件 版 本 ， 会 发 生 什 么 。 如 果 你 不 能 通过 更 新 service worker 来 缓存 一 个 新 版 
本 的 话 ， 可 能 在 数 小 时 之 内 都 不 能 修复 你 的 应 用 。 


幸运 的 是 ， 浏 览 器 有 一 项 保护 措施 ， 默 认 的 过 期 时 间 是 24 小 时 ， 如 果 你 尝试 设置 更 长 的 
过 期 时 间 也 不 会 生效 。 


4.8 开发 者 工具 


当 你 了 解 本 书 中 的 service worker、CacheStorage 以 及 其 他 新 的 API 的 时 候 ， 我 鼓励 你 花 时 
间 学 习 不 同 浏览 器 中 提供 的 开发 者 工具 。 


大 部 分 的 现代 浏览 器 ， 例 如 Chrome、Opera 和 Firefox， 都 提供 了 可 以 帮助 你 改进 工作 流程 
的 工具 ， 使 代码 开发 和 调试 更 加 容易 。 


以 下 是 我 个 人 最 常 使 用 的 一 些 开 发 者 工具 。 














4.8.1 控制 台 

现代 浏览 器 提供 了 令 人 惊叹 的 调试 工具 ， 包 括 设置 断 点 、 监 听 变 量 、 跳 入 和 跳出 函数 等 。 
但 也 许 是 我 年 纪 大 了 ， 没 有 耐心 学 习 新 技巧 了 ， 传 统 的 控制 台 依 然 是 我 首选 的 调试 工具 。 
使 用 service worker 的 时 候 ， 请 记 住 ， 当 你 在 任何 选项 卡 中 打开 控制 台 的 时 候 ， 命 令 都 会 
运行 在 window 上 下 文中 ， 而 不 是 service worker。 如 果 你 想 要 探索 service worker 上 下 文 ， 
并 在 其 中 运行 命令 ， 就 需要 改变 控制 台 的 上 下 文 。 


在 Chrome 和 Opera 中 ， 可 以 通过 打开 控制 台 ， 并 将 上 下 文 从 top (也 就 是 window) 修改 
成 你 的 service worker 文件 来 实现 。 选 中 的 上 下 文 在 图 4-6 中 以 红色 标记 出 来 了 。 
































; | Console Remote devices Search Xx 
富 驹 serviceworkerjs #40032 (active 了 Preserve log Show all messages 
F 四 |] Regex Hide network Hide violations [Errors Warnings Info Logs Debug Handled 





> Self ,registration 


» ServiceWorkerRegistration {finstalling: null, waiting: null, active: ServiceWorker, scope: 
| "http://localhost:8443/", onupdatefound: null..} 














图 4-6: 在 Chrome 中 改变 浏览 器 的 上 下 文 


在 Firefox 中 ， 可 以 通过 打开 about:debugging#workers， 并 点 击 service worker 讨 边 的 调试 
按钮 实现 同样 的 效果 。 如 果 你 在 service worker 旁边 没有 看 到 调试 按钮 ， 可 能 需要 先 点 击 
start 开始 它 。 


4.8.2 清除 缓存 并 刷新 


在 工作 时 ， 我 们 一 直 在 修改 代码 和 数据 结构 。 在 浏览 器 中 查看 应 用 的 时 候 ， 我 们 通常 想 确 
保 正在 查看 最 新 的 代码 、 最 近 的 数据 ， 并 且 正 在 使 用 一 份 最 新 的 缓存 。 
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在 过 去 ， 这 很 简单 。 只 需要 在 刷新 时 按 住 Shift 键 ， 就 可 以 实现 硬性 的 重新 加 载 ， 并 确 
保 忽略 浏览 器 的 缓存 。 但 随 着 越 来 越 多 的 静态 资源 存储 在 更 多 的 地 方 (CacheStorage、 
IndexedDB 、Cookies、Local Storage、Session Storage 等 )， 仅 仅 这 样 做 已 经 不 够 了 。 


幸运 的 是 ，Chrome 和 Opera 中 的 开发 者 工具 提供 了 一 个 快速 方法 来 实现 清空 。 在 其 中 一 
个 训 览 器 的 开发 者 工具 中 ， 打 开 Application 标签 页 ， 选 择 Clear storage 部 分 ， 勾 选 复 选 
框 ， 然 后 点 击 “Clear site data” 即 可 。 











4.8.3 检查 CacheStorage 和 IndexedDB 

在 开发 过 程 中 ， 你 经 常 需要 检查 存储 在 CacheStorage 和 IndexedDB (参见 第 6 章 ) 中 的 资源 。 
你 可 以 通过 控制 台 编 程 访问 这 些 存储 资源 ， 打 开 它 们 的 连接 ， 并 读 取 其 数据 。 但 是 这 样 相 
当 麻烦 。 


Firefox、Chrome 和 Opera 都 可 以 让 你 直接 使 用 图 形 用 户 界面 来 检查 这 些 存储 资源 。 在 
Firefox 中 ， 可 以 通过 开发 者 工具 的 Storage 标签 ( 见 图 4-7) 来 访问 。 而 在 Chrome 和 
Opera 中 ， 你 可 以 通过 Application 标签 来 找到 它 。 



























































ER Inspector 75] Console C Debugger © Performance beg 回 x 
= 纺 Cache Storage 了 Filter items 
-ro 


白 gih-cache-v6 http://localhost:8443/css/gih.css OK 





























三 Cookies http://localhost:8443/events.json OK 
全 ndexedpB http://localhost:8443/img/about-hotel-luxury.jpg OK 
国 http://localhost:8443 http://localhost:8443/img/about-hotel-spa.jpg OK 
http://localhost:8443/img/event-calendar-link.jpg OK 

BS gih-reservations (defeult) http://localhost:8443/img/event-default.jpg OK 

© reservations http://localhost:8443/img/event-gala.jpg OK 











图 4-7: 在 Firefox 中 检查 存储 资源 


4.8.4 网 络 节 流 与 模拟 离线 情况 

当 我 们 在 本 地 机 器 上 开发 应 用 时 ， 总 是 在 最 佳 的 条 件 下 看 待 工作 ， 我 们 很 容易 遗忘 一 点 ， 
即 这 并 不 是 用 户 将 会 真正 体验 到 的 应 用 。 

当 我 们 试图 改进 应 用 时 ， 其 中 一 个 最 有 价值 的 工具 就 是 模拟 不 同 的 连接 速度 以 及 模拟 离线 
状态 的 能 力 。 

在 Firefox 中 ， 可 以 通过 在 开发 者 工具 栏 中 打开 响应 式 设计 模式 (Responsive Design Mode)， 
然后 修改 窗口 顶部 的 节 流 设置 来 实现 连接 节 流 。 而 在 Chrome 和 Opera 中 ， 可 以 通过 点 击 
开发 者 工具 的 Network 标签 实现 这 一 点 ， 即 点 击 节 流 控 制 ， 并 选择 不 同 的 连接 状况 即 可 
(如 图 2-4 所 示 )。 


记 住 ， 模 拟 移 动 设备 的 功能 只 能 实现 到 以 上 程度 。 这 不 能 替代 实际 设备 上 的 
真实 测试 。 我 强烈 推荐 通过 Alex Russel 的 “Progressive Performance” 演 讲 
学 习 进 行 现实 中 的 检查 。 
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4.8.5 Lighthouse 


Lighthouse 是 一 个 开源 工具 ， 最 初 由 Google 开发 ， 可 用 于 自动 审计 你 的 应 用 是 否 符合 一 系 
列 的 PWA 最 佳 实 践 。 

Lighthouse 既 可 以 通过 浏览 器 扩展 的 方式 运行 (如 图 4-8 所 示 )， 也 可 以 通过 命令 行 工具 运 
行 ， 你 可 以 将 其 整合 到 你 的 持续 集成 流水 线 中 。 
































®@™ a ( GothamiImperialHotel-Evern: x 粳 


€ CO © Ilocalhost:8443/my-account 交加: 


Lighthouse 
http://localhost:8443 


Generate report 





Arrival: #0of nights: 


Options 














4-8: Lighthouse Chrome 浏览 器 扩展 正在 测试 哥 谭 帝国 酒店 应 用 


4.9 ”小结 
希望 现在 你 更 好 地 理解 了 service worker 生命 周期 。 


如 果 你 仍然 不 确定 为 什么 有 时 候 在 service worker 开始 工作 之 前 需要 刷新 页 面 ， 或 者 为 什 
么 在 更 新 service worker 之 后 怎么 刷新 都 不 能 让 新 代码 工作 ， 请 考虑 重新 阅读 一 遍 本 章 。 


service worker 生命 周期 可 能 是 其 另 一 个 会 造成 疑惑 的 方面 。 如 果 你 忘记 将 其 考虑 进去 ， 可 
能 会 花 20 分 钟 尝试 调试 一 个 特别 讨厌 的 bug， 最 后 发 现 你 的 页 面 仍然 被 一 个 旧 的 service 
worker 所 控制 。 相 信 我 ， 我 在 不 久之 前 就 经 过 过 这 种 情况 。 

不 过 ,理解 service worker 生命 周期 也 为 你 提供 了 新 的 机 会 来 完成 一 些 令 人 惊奇 的 事情 。 通 
过 理解 install 事件 的 原理 ， 我 们 就 可 以 为 service worker 创建 安装 依赖 。 通 过 理解 service 
worker 何 时 从 已 安装 状态 变 成 激活 状态 ， 只 需 几 行 代 码 ， 我 们 就 能 够 创建 一 个 可 以 管理 多 
缓存 版 本 的 复杂 系统 。 在 接 下 来 的 儿童 中 ， 我 们 将 会 发 现 更 多 的 机 会 来 运用 这 些 知识 去 实 
现 一 些 令 人 惊讶 的 事情 。 
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拥抱 离线 优先 








十 多 年 前 ， 我 和 其 他 人 共同 创办 了 一 家 名 为 Wi-Ser 的 公司 。 那 时 是 2004 年 ， 我 们 的 目标 
是 ， 让 咖啡 迄 和 餐馆 老板 向 他 们 的 客户 提供 免费 WiFi。 

在 试图 兜售 这 个 革命 性 的 想法 时 ， 我 们 遇 到 了 两 种 主要 的 反对 意见 。 

非 技术 怀疑 者 问 我 们 :“ 为 什么 我 们 需要 向 客户 提供 WiFi ? 为 什么 他 们 在 喝 咖 啡 的 时 候 需 
要 上 网 ? ” 
少数 技术 怀疑 者 指出 ， 他 们 了 解 到 WiMAX 即将 来 临 一 一 有 线 连接 很 快 将 会 被 取代 。 

从 那 时 起 ， 十 多 年 过 去 了 ， 我 们 中 的 大 多 数 人 意识 到 ， 移 动 连接 的 问题 不 会 很 快 “ 解 决 ”。 
坐 在 家 里 或 者 办 公 室 里 时 ， 我 们 有 一 个 可 靠 的 互联 网 连接 ， 所 以 很 容易 忽视 这 个 问题 。 连 
接 问 题 是 世界 角落 中 那些 不 幸 的 人 面临 的 问题 。 但 是 ， 甚 实 这 个 问题 会 影响 我 们 所 有 人 ， 
无 论 是 登 机 、 在 国外 降落 而 又 没有 当地 的 数据 流量 、 地 铁通 勤 、 徒 步 旅行 ， 甚 至 只 是 坐 在 
家 中 接收 不 到 网 络 信号 的 房间 ， 都 不 例外 (除非 站 在 一 个 相当 高 的 位 置 )。 

我 们 已 经 习惯 了 这 一 点 ， 以 至 于 “我 要 进入 隧道 了 ”或 者 “我 要 进 电梯 了 ”已 经 成 为 了 笑 
话 。 当 你 想 要 中 断 和 其 他 人 的 连接 的 时 候 ， 就 会 编造 这 样 的 借口 。 

在 Web 应 用 中 ， 是 时 候 停 止 把 失去 连接 作为 一 种 错误 状态 来 处 理 了 。 离 线 和 差 连接 都 是 应 
用 中 不 可 避免 的 状态 ， 我 们 必须 为 此 做 打算 。 

当 意 识 到 不 能 再 忽视 用 户 通过 移动 端 屏幕 来 访问 网 站 的 情况 时 ， 我 们 拥抱 了 移动 优先 原 
则 。 我 们 不 得 不 接受 这 样 一 个 事实 : 网 站 不 能 只 适 配 15 英寸 的 屏幕 了 。 我 们 学 会 了 优先 
考虑 移动 设备 ， 并 以 此 为 基础 构建 用 户 体验 。 

然而 ， 在 日 益 增长 的 移动 世界 中 ， 连 接 从 未 得 到 保证 ， 带 宽 费 用 也 非常 高 昂 ， 我 们 也 变 得 
自满 了 。 
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随 着 我 们 的 网 站 越 来 越 复杂 ， 变 成 了 成 熟 的 Web 应 用 ， 网 站 的 平均 大 小 也 在 激增 。 很 容易 
找到 包含 数 兆 字 节 内 容 的 Web 页 面 ， 尽 管 它们 的 内 容 是 纯 静 态 的 。 


世界 已 经 转变 成 移动 优先 ， 但 我 们 的 连接 和 带宽 思维 却 依 然 根植 在 桌面 浏览 器 的 时 代 。 
是 时 候 开始 思考 离线 优先 (offine-first) 了 。 


5.1 什么 是 离线 优先 


传统 Web 应 用 完全 依赖 于 服务 器 。 所 有 的 数据 、 内 容 、 设 计 和 应 用 逻辑 都 存储 在 服务 端 

上 。 客 户 端 仅仅 用 来 将 一 些 HTML 内 容 演 染 到 屏幕 上 。 但 随 着 Web 应 用 的 发 展 ， 越 来 越 
多 的 逻辑 和 能 力 转 移 到 了 客户 端 。Web 应 用 开始 进行 数据 处 理 、 模 板 泻 染 等 工作 。 但 是 ， 
和 原生 应 用 不 一 样 的 是 ， 我 们 的 Web 应 用 依然 完 全 依赖 于 服务 器 。 任 何 连 接 的 中 断 都 会 导 
致 应 用 完全 崩溃 。 

离线 优先 接受 了 一 个 简单 的 事实 : 离线 和 低 连接 的 情况 是 不 可 避免 的 。 这 些 情况 不 应 该 被 
视 为 灾难 性 的 失败 ， 而 只 是 Web 应 用 生命 中 另 一 种 可 能 的 状态 。 这 是 一 种 你 应 该 规划 在 内 
并 优雅 处 理 的 状态 。 

拥抱 离线 优先 意味 着 接受 这 一 点 : 尽管 应 用 的 某 些 功能 在 用 户 离 线 时 可 能 不 能 正常 使 用 ， 
但 更 多 的 功能 应 该 保持 可 用 。 


让 我 们 回顾 2.2 节 的 “挑战 不 同 ， 实 现 方 式 各 异 ” 中 的 示例 消息 应 用 。 传 统 

上 ， 如 果 用 户 在 离线 时 访问 这 个 Web 应 用 ， 浏 览 器 只 会 显示 一 个 错误 。 但 
是 在 原生 应 用 中 ， 这 种 糟糕 的 用 户 体验 是 不 可 接受 的 。 我 们 没有 理由 不 让 
Web 应 用 达到 同样 的 用 户 体验 标准 。 
现代 的 消息 PWA 可 以 在 本 地 缓存 其 接口 和 逻辑 ， 以 及 最 近 的 消息 内 容 。 然 
后 ， 它 可 以 将 最 后 一 次 缓存 的 内 容 以 及 完整 的 用 户 界 面 展示 给 用 户 。 虽 然 内 
容 可 能 有 点 过 时 〈 和 用 户 进行 沟通 也 很 重要 )， 但 它 仍 然 是 有 用 的 。 这 个 应 
用 将 不 再 把 失去 网 络 连接 作为 灾难 性 的 失败 处 理 。 它 为 用 户 提 供 了 当前 条 件 
下 可 能 的 最 佳 体 验 。 

































































离线 优先 的 另外 一 个 基本 方面 是 优雅 地 处 理 这 些 连 接 的 变化 。 优 雅 地 处 理 丢 失 的 连接 ， 意 
味 着 向 用 户 传达 某 些 功能 可 能 不 可 用 ， 或 者 他 正在 查看 的 数据 可 能 是 几 小 时 之 前 的 ， 但 仍 
然 尽 可 能 多 地 暴露 功能 。 即 使 你 已 经 构建 了 一 个 完全 离线 可 用 的 Web 应 用 ， 优 雅 地 处 理 连 
接 变 化 也 意味 着 用 户 可 以 放心 使 用 这 个 应 用 ， 并且 他 的 数据 不 会 丢失 。 


回 到 消息 应 用 的 示例 中 ， 开 发 者 还 需要 决定 如 何 处 理 用 户 在 离线 状态 下 发 送 
的 新 消息 。 应 用 可 以 “优雅 地 禁用 ”输入 框 ， 让 用 户 知道 不 能 在 离线 状态 下 
发 送 消息 。 或 者 也 可 以 让 用 户 输入 新 消息 ， 保 存在 浏览 器 的 本 地 数据 库 中 
(参见 第 6 章 )， 然 后 在 连接 重新 建立 的 时 候 立 即 发 送 。 应 用 甚至 可 以 在 发 送 
消息 时 (无 论 用 户 离线 还 是 在 线 ) 使 用 后 台 同 步 〈 参 见 第 7 章 ) 来 保证 信息 
总 能 发 送 ， 不 管 连接 如 何 变 化 。 









































移动 优先 意味 着 : 总 是 基于 用 户 设 备 ， 提 供 最 佳 体验 。 
离线 优先 意味 着 : 总 是 基于 当前 网 络 条 件 ， 提 供 最 佳 体 验 。 


5.2 常用 缓存 模式 


在 本 章 结尾 ， 我 们 将 让 哥 谭 帝国 酒店 网 站 完全 符合 离线 优先 原则 。 

在 为 站 点 不 同 部 分 制定 缓存 策略 之 前 ， 我 们 需要 熟悉 一 些 用 于 缓存 的 常见 设计 模式 。 

不 同 的 模式 适合 不 同 的 情况 ， 大 多 数 应 用 都 会 使 用 几 种 不 同 的 模式 。 例 如 ， 如 有 果 我 们 要 创 
建 天 气 应 用 ， 可 能 希望 采用 的 模式 是 : 总 是 加 载 来 自 网 络 的 最 新 天 气 数据 ， 并 且 只 在 网 络 
请 求 失败 时 才 尝 试 从 缓存 中 获取 。 另 外 ， 对 于 展示 不 同 天 气 情况 的 图 标 ， 我 们 可 能 倾向 于 
采用 另 一 种 模式 : 总 是 首先 从 缓存 中 获取 图 标 ， 只 有 在 缓存 中 找 不 到 的 时 候 ， 才 尝试 去 请 
求 网 络 。 
天 气 状 况 是 资源 迅速 变化 的 一 个 例子 ， 其 关键 是 要 展示 最 新 的 数据 。 至 于 描绘 局 部 多 云 的 
图 标 ， 既 不 受 时间 影 响 ， 也 不 会 经 常 变 化 。 

我 们 来 探讨 一 些 更 常见 的 缓存 模式 。， 

仅 缓存 


从 缓存 中 响应 所 有 的 资源 请 求 。 如 果 在 缓存 中 找 不 到 ， 请 求 会 失败 。 该 模式 假定 资源 以 
前 缓存 过 ， 最 有 可 能 用 作 service worker 安装 期 间 的 依赖 项 。 


这 对 于 静态 资源 是 实用 的 ， 因 为 静态 资源 不 会 在 发 布 之 间 发 生变 化 ， 例 如 徽标、 图 标 和 
样式 表 。 这 并 不 意味 着 你 永远 无 法 修改 它们 ， 只 是 意味 着 它们 不 会 在 应 用 某 个 特定 版 本 
的 生命 周期 内 发 生变 化 。 


如 果 这 些 文件 确实 发 生 了 变化 ， 可 以 通过 重新 命名 并 将 这 些 新 文件 存储 到 缓存 中 来 更 新 
它们 。 这 类 似 于 传统 的 缓存 实践 (和 service worker 无 关 )， 即 在 每 个 版 本 (例如 style. 
V1.0.3.css 或 者 main_ae3f7.js) 中 ,修改 所 有 静态 文件 的 名 称 ， 并 且 配 置 服务 器 ， 使 得 
在 提供 这 些 文件 时 ， 携 带 一 个 非常 长 (其 至 是 无 限 长 ) 的 缓存 过 期 时 间 。 


如 果 选 择 不 修改 文件 名 ， 可 以 通过 发 布 service worker 的 一 个 新 版 本 再 次 获取 这 些 文件 ， 
然后 在 service worker 的 激活 事件 中 进行 缓存 (参见 第 4 章 )。 
self.addEventListener("fetch", function(event) { 

event.respondwith( 

caches.match(event.request) 

); 
}); 

缓存 优先 ， 网 络 作为 回 退 方案 

和 仅 缓 存 类 似 ， 这 个 模式 也 会 从 缓存 中 响应 请 求 。 然 而 ， 如 果 在 缓存 中 找 不 到 内 容 ， 
service worker 会 尝试 从 网 络 中 请 求 并 返回 : 
















































































注 1: 这 些 模 式 以 及 一 些 其 他 内 容 ， 首 先是 在 Jake Archibald 的 The Offline Cookbook 中 被 分 类 和 命名 的 。 强 列 
推荐 这 本 书 。 
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self.addEventListener("fetch", function(event) { 
event.respondWwith( 
caches.match(event.request).then(function(response) { 
return response || fetch(event.request); 


仅 网 络 
经 典 的 Web 模型 。 尝 试 从 网 络 中 请 求 。 网 络 不 通 ， 则 请 求 失 败 。 可 以 用 于 不 缓存 的 内 
容 ， 例 如 用 于 数据 统计 的 请 求 。 
你 很 少 需要 使 用 这 种 模式 ， 因 为 只 需要 忽略 service worker 的 fetch 事件 ， 让 其 默认 行为 
发 挥 作用 即 可 实现 仅 网 络 请 求 。 但 是 ， 如 果 你 发 现 自己 需要 以 编程 方式 执行 这 种 网 络 请 
求 ， 下 面 的 代码 可 能 会 有 帮助 。 
self.addEventListener("fetch", function(event) { 


event.respondWith( 
fetch(event.request) 


); 
})); 
网 络 优 先 ， 缓 存 作 为 回 退 方案 
总 是 向 网 络 发 起 请 求 。 请 求 失败 则 返回 缓存 中 的 版 本 。 如 果 在 缓存 中 找 不 到 ， 请 求 就 会 
失败 。 
self.addEventListener("fetch", function(event) { 
event.respondWith( 


fetch(event .request) .catch(function() { 
return caches.match(event.request); 


]) 

); 

}); 
用 户 总 能 获取 到 当前 连接 状况 下 可 用 的 最 新 内 容 。 对 于 经 常 改变 的 内 容 来 说 这 很 合适 ， 
对 于 需要 显示 最 新 响应 的 场景 来 说 也 很 重要 。 
先 缓存 ， 后 网 络 
在 检查 网 络 是 否 有 较 新 版 本 的 期 间 ， 立 即 显 示 缓 存 中 的 数据 。 一 旦 网 络 返 回响 应 ， 检 查 
它 是 否 比 缓存 新 ， 并 使 用 新 内 容 更 新 页 面 。 
虽然 这 可 能 看 起 来 是 一 种 最 好 的 方法 ， 将 缓存 的 快速 响应 和 网 络 中 可 用 的 最 新 内 容 结 合 
了 起 来 ， 但 是 它 需 要 付出 代价 。 
你 必须 修改 你 的 应 用 才能 发 起 两 次 请 求 ， 先 显示 缓存 内 容 ， 最 后 在 新 内 容 可 用 的 时 候 更 
新 页 面 。 更 重要 的 是 ， 这 种 模式 可 能 会 为 你 的 应 用 带 来 新 的 UX (用 户 体验 ) 挑战 。 虽 
然 把 一 张 图 片 灰 换 成 可 用 的 新 内 容 很 容易 ， 但 是 如 果 你 要 更 新 的 内 容 是 用 户 正在 编辑 的 
文档 文本 呢 ? 如 果 用 户 已 经 开始 编辑 第 二 名 话 ， 你 又 需要 修改 它 ， 应 该 如 何 处 理 呢 ? 修 
改 的 最 佳 方式 是 什么 ， 你 又 应 该 如 何 与 用 户 沟通 这 个 修改 呢 ? 
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通用 回 退 
当 用 户 请 求 的 内 容 在 缓存 中 找 不 到 ， 并 且 网 络 不 可 用 时 ， 该 模式 从 缓存 中 返回 一 个 禁 代 
的 “默认 回 退 ”版 本 ， 而 不 是 返回 一 个 错误 。 


一 种 常见 的 用 法 是 返回 一 张 通用 图 像 ， 代 替 某 个 特定 图 像 。 例 如 ， 当 用 户头 像 在 缓存 中 
找 不 到 ， 网 络 也 不 可 用 的 时 候 ， 可 以 显示 一 张 通用 的 头像 ， 而 不 是 在 应 用 中 留 下 一 张 损 
坏 的 图 像 。 这 种 方法 非常 棒 ， 而 且 可 以 在 连接 状态 变化 的 时 候 优 雅 地 进行 处 理 。 


这 种 模式 通常 会 与 其 他 模式 一 起 使 用 ， 作 为 最 终 的 回 退 方案 。 下 面 的 示例 演示 了 它 如 何 
与 网 络 优先 ， 缓 存 作为 回 退 方案 模式 一 起 使 用 ， 创 建 一 种 网 络 优先 ， 缓 存 作 为 回 退 方 
案 ， 通 用 回 退 作为 兜 底 方案 的 模式 : 


self.addEventListener("fetch", function(event) { 
event.respondwith( 
fetch(event.request).catch(function() { 
return caches.match(event.request).then(function(response) { 
return response || caches.match("/generic.png"); 
]); 
}) 
); 
]); 



































Twitter 使 用 PWA 敲 开 新 兴 市 场 的 大 门 

对 于 Twitter 来 说 ， 渐 进 式 Web 应 用 是 个 福音 一 一 尤其 是 在 进入 新 兴 市 场 的 
路 上 , 仍然 有 着 大 量 的 增长 机 会 。 这 些 市 场 往往 具有 昂贵 、 缓 慢 、 不 可 靠 连 
接 等 特征 。 

Twitter 的 渐进 式 Web 应 用 结合 了 他 们 原生 应 用 中 的 许多 好 处 。 其 大 小 仅 为 
400KB (大 约 是 安 卓 原生 版 本 大 小 的 2.5%)， 使 用 的 电量 更 少 ， 比 原生 应 用 
从 首页 启动 的 时 间 还 快 了 几 秒 钟 。 更 重要 的 是 ， 它 不 仅 结合 了 所 有 这 些 好 
处 ， 还 没有 牺牲 本 地 应 用 的 任何 特性 。 

所 有 的 这 些 好 处 给 Twitter 带 来 了 显著 的 优势 。 在 市 场 上 ， 较 慢 的 功能 手机 ， 
以 及 不 可 靠 又 昂贵 的 连接 才 是 常态 。 


: 、 生 

5.3 混合 与 匹配 : 创造 新 模式 

我 们 已 经 看 到 了 一 些 更 常见 的 缓存 模式 ， 让 我 们 研究 一 下 如 何 将 它们 组 合 起 来 ， 以 创建 缓 

存 和 服务 内 容 的 新 方法 。 

按 需 缓存 
对 于 不 经 常 改 变 的 资源 以 及 service worker install 事件 期 间 不 想 缓 存 的 资源 ， 我 们 可 以 
扩展 缓存 优先 ， 网 络 作为 回 退 方 案 模 式 ， 将 从 网 络 返 回 的 请 求 保存 到 缓存 中 。 
这 样 可 以 有 效 地 创建 一 个 按 需 缓存 资源 的 系统 。 资 源 被 第 一 次 请 求 时 ， 在 缓存 中 是 找 不 
到 的 。service worker 将 从 网 络 中 检索 资源 ， 保 存 到 缓存 中 ， 然 后 返回 。 当 下 次 再 请 求 
该 资源 时 ， 它 将 立即 从 缓存 中 返回 。 
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self.addEventListener("fetch", function(event) { 
event.respondWwith( 
caches.open("cache-name").then(function(cache) { 
return cache.match(event.request).then(function(cachedResponse) { 

return cachedResponse || fetch(event.request).then( 
function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 


}); 





克隆 示例 一 一 多 次 使 用 同一 响应 
当 你 查看 上 述 模 式 的 代码 时 ， 可 能 已 经 注意 到 一 点 新 的 内 容 。 在 将 响应 保存 
到 缓存 中 时 ， 我 们 对 其 调用 了 一 个 clone 方法 : 


fetch(request).then(function(response) { 
cache.put(request, response.clone()); 
return response; 


]); 








为 什么 我 们 调用 put 放 入 缓存 的 是 一 份 克隆 副本 ， 而 不 是 响应 本 身 呢 ? 
实际 上 ， 这 和 我 们 使 用 cache.put() 并 没有 什么 关系 。 之 前 我 们 放 和 缓存 的 响 
应 并 没有 先进 行 克隆 。 真 正 的 原因 是 ， 我 们 打算 不 止 一 次 地 使 用 这 个 响应 。 
你 可 以 这 样 理解 :响应 是 写 在 一 张 纸 上 的 。 假 如 哥 谭 帝国 酒店 的 主人 ， 也 就 
是 德 维 恩 家 族 财富 的 继承 人 ， 准 备 了 一 次 演讲 并 将 其 写 在 了 一 张 纸 上 。 就 在 
他 准备 要 上 台 的 时 候 ， 他 把 演讲 稿 交 给 助手 存放 。 一 旦 他 登台 ， 可 能 会 发 现 
自己 站 在 一 个 拥挤 的 房间 前 面 ， 手 上 什么 也 没有 一 一 除非 他 先 把 演讲 稿 抄 了 
一 份 ， 然 后 再 交 给 他 的 助手 。 

响应 也 是 同样 的 道理 。 你 可 以 将 它 从 一 个 位 置 传 递 到 另 一 个 位 置 (例如 使 用 
return 语句 ),， 但 是 如 果 你 打算 不 止 一 次 地 使 用 它 例如， 将 其 放 入 缓存 并 
使 用 它 来 响应 事件 )， 请 确保 使 用 clone 命令 来 复制 它 。 










































































缓存 优先 ， 网 络 作为 回 退 方案 ， 并 频繁 更 新 缓存 
对 于 经 常 改变 的 资源 ， 如 果 显示 最 新 版 本 的 优先 级 不 如 返回 快速 响应 (例如 用 户头 像 )， 
我 们 可 以 修改 缓存 优先 ， 网 络 作为 回 退 方案 模式 ， 即 使 在 缓存 中 可 以 找到 ， 也 总 会 从 网 
络 请 求 资源 。 这 种 模式 从 缓存 中 快速 响应 ， 同 时 获取 更 新 的 版 本 并 在 后 台 缓存 。 在 用 户 
下 次 请 求 该 资源 的 时 候 ， 从 网 络 中 请 求 的 资产 导致 的 任何 变化 都 将 生效 。 这 种 模式 将 快 
速 响 应 和 相对 较 新 的 响应 (显示 上 次 请 求 时 的 最 新 内 容 ) 相 结合 。 
self.addEventListener("fetch", function(event) { 

event.respondWith( 


caches.open("cache-name").then(function(cache) { 
return cache.match(event.request).then(function(cachedResponse) { 
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var fetchPromise = 
fetch(event.request).then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 
}); 


return cachedResponse || fetchPromise; 




















我 们 的 事件 处 理 器 以 event.respondwith 开始 ， 余 下 的 代码 都 在 构建 这 个 响应 。 


首先 我 们 打开 一 个 缓存 ， 并 试图 在 其 中 寻找 匹配 的 请 求 。 不 管 是 否 匹 配 成 功 ，cache. 
match 返回 的 promise 都 会 成 功 ， 随 后 调用 then 回调 函数 。 回 调 函 数 一 开 始 会 创建 一 个 
新 的 fetch 请 求 ， 用 于 请 求 资 源 ， 保 存 到 缓存 中 ， 并 返回 响应 。 代 码 的 最 后 一 行 返 回 给 
event.respondWith 的 要 么 是 已 缓存 的 响应 ， 要 么 是 在 没有 找到 缓存 的 请 求 下 返回 网 络 
响应 的 promise。 


当 我 们 调用 fetch 的 时 候 ， 会 返回 一 个 promise， 并 继续 执行 脚本 ， 同 时 fetch 操作 是 
异步 完成 的 。 这 允许 我 们 在 不 等 待 fetch 完成 的 情况 下 ， 直 接 返 回 cachedResponse， 或 
者 返回 fetch 创建 的 promise (这 个 promise 在 完成 时 会 带 有 网 络 返 回 的 文件 )。 


网 络 优先 ， 缓 存 作为 回 退 方 案 ， 并 频繁 更 新 缓存 
如 果 “ 始 终 提 供 可 用 资源 的 最 新 版 本 ”很 重要 ， 可 以 对 网 络 优先 ， 缓 存 作 为 回 退 方案 稍 
作 修 改 。 和 原始 的 模式 类 似 ， 该 模式 总 会 试图 从 网 络 中 获取 最 新 版 本 ， 仅 在 网 络 请 求 失 
败 的 时 候 才 回 退 到 缓存 版 本 。 此 外 ， 每 当 网 络 成 功 访问 时 ， 会 将 当前 缓存 更 新 为 网 络 响 
应 的 内 容 。 


self.addEventListener("fetch", function(event) { 
event.respondwith( 
caches.open("cache-name").then(function(cache) { 

return fetch(event.request).then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 

}).catch(function() { 
return caches.match(event.request); 







































































5.4 规划 缓存 策略 

直到 目前 为 止 ， 我 们 在 哥 谭 帝国 酒店 应 用 中 处 理 连 接 问题 的 方法 完全 是 基于 网 络 优先 ， 缓 
存 作 为 回 退 方案 模式 。 我 们 使 用 这 个 模式 缓存 了 首页 的 一 个 简化 版 本 ， 并 在 检测 到 网 络 错 
误 时 提供 给 用 户 。 

这 已 经 比 我 们 原本 的 应 用 有 了 显著 的 改进 。 我 们 知道 在 加 载 了 这 一 功能 后 ， 可 以 为 用 户 提 
供 附 加 的 价值 。 
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现在 ， 我 们 已 经 了 解 了 不 同 的 缓存 模式 ， 可 以 再 进一步 了 。 

是 时 候 结 合 目前 所 学 到 的 知识 ， 采 用 离线 优先 的 方式 构建 哥 谭 帝国 酒店 应 用 了 。 当 我 们 完 
成 时 ， 页 面 本 身 会 即时 加 载 ， 其 中 那些 随时 间 改 变 的 资源 将 会 从 网 络 加 载 ， 如 果 网 络 不 可 
用 ， 则 从 缓存 中 加 载 。 

让 我 们 检查 一 下 首页 。 

首页 由 静态 的 index.html 文件 组 成 ， 它 很 少 会 随 着 版 本 发 生变 化 。 它 会 请 求 多 个 静态 图 片 、 
样式 表 和 JavaScript 文件 。index.html 使 用 的 所 有 静态 文件 都 可 以 在 安装 过 程 缓 存 下 来 ， 并 
且 完 美 适合 缓存 优先 ， 网 络 作为 回 退 方案 模式 。 这 将 为 用 户 提 供 更 加 快速 的 加 载 时 间 ， 无 
论 用 户 是 在 线 、 离 线 还 是 介 于 两 者 之 间 。 

至 于 index.html 文件 本 身 呢 ? 由 于 这 个 文件 很 少 在 版 本 之 间 变 化 ， 所 以 我 们 可 能 会 想到 缓 
存 优先 ， 网 络 作为 回 退 方案 模式 。 但 是 ， 在 这 个 场景 下 ， 这 样 的 做 法 确实 会 带 来 很 大 的 负 
看 作用。 如 果 这 个 文件 更 新 ， 我 们 不 得 不 同时 更 新 service worker， 以 确保 获取 和 缓存 新 的 
文件 。 
更 糟 的 是 ， 在 旧 的 service worker 释放 页 面 控制 ， 新 的 service worker 激活 之 前 ， 用 户 都 不 
会 看 到 新 的 版 本 。 在 表 5-1 中 ， 你 可 以 看 到 每 次 访问 的 情况 。 


表 5-1: 每 次 访问 对 应 的 页 面 和 service worker 状 态 































































































































































































访 次 ”说明 service worker index.html 
1 安装 SW v1， 并 缓存 HIML v1l HTML v1 从 网 络 提供 
新 版 service worker (v2) 和 安装 SW v2， 并 缓存 HTML v2。SW vl at 
2 HTML v2 从 缓存 提供 
新 版 HTML (v2) 可 用 依然 在 控制 页 人 
3 ”SW vl 有 机 会 释放 页 面 控制 SW v2 激活 ， 并 控制 页 面 HTML v2 从 网 络 提供 
这 意味 着 即使 我 们 用 新 的 HTML 文件 更 新 service worker， 它 也 不 会 在 用 户 下 次 访问 应 用 





的 时 候 显 示 。 
第 4 章 详 细 说 明了 为 何 会 发 生 这 种 情况 ， 以 及 service worker 是 如 何在 这 些 状 态 之 间 变 化 的 。 
我 们 来 考虑 缓存 index.html 的 可 选 方 案 。 


(1) 使 用 缓存 优先 ， 网 络 作为 回 退 方案 模式 提供 服务 。 其 缺点 是 有 可 能 不 会 显示 可 用 的 最 新 
版 本 ， 即 使 它 可 能 已 经 被 缓存 。 然 而 ， 这 是 一 种 快速 、 节 省 带宽 的 方案 。 

(2) 使 用 网 络 优先 ， 缓 存 作为 回 退 方 案 模 式 提 供 服 务 。 这 样 将 会 总 是 展示 最 新 的 文件 。 其 缺 
点 是 我 们 错过 了 改善 HTML 文件 加 载 时 间 的 机 会 ， 因 为 HTML 文件 可 能 已 经 存在 于 组 
存 中 。 

(3) 使 用 缓存 优先 ， 网 络 作为 回 退 方案 ， 并 频繁 更 新 缓存 模式 。 和 方案 1 类 似 ， 该 方案 总 
是 从 缓存 中 提供 index.html， 并 提供 非常 快 的 响应 时 间 。 此 外 ， 它 还 会 检查 index.html 
文件 的 更 新 ， 如 果 存 在 则 更 新 缓存 ， 而 不 需要 我 们 更 新 service worker 的 版 本 。 下 次 用 
户 加 载 页 面 时 ， 就 能 看 到 最 新 的 文件 。 这 种 方式 将 快速 响应 时 间 和 几乎 总 是 最 新 的 文 
件 结 合 起 来 。 然 而 ， 它 使 用 的 带宽 和 方案 2 一 样 多 ， 或 者 说 就 像 根 本 没有 使 用 service 


worker 一 样 。 
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对 于 哥 谭 帝国 酒店 的 首页 ， 我 选择 使 用 方案 3。 无 论 用 户 连接 状况 如 何 ， 这 种 方式 都 可 
以 即时 加 载 首 页 。 这 样 做 的 主要 缺点 是 ， 有 时 可 能 显示 的 首页 是 旧 的 ， 直 到 用 户 刷新 页 
面 〈 在 这 种 情况 下 问题 不 大 ， 因 为 所 有 可 能 变化 的 动态 数据 都 是 使 用 提供 最 新 数据 的 方式 
缓存 的 ) 。 第 二 个 缺点 是 ， 每 次 访问 都 要 从 网 络 中 获取 HIML， 即 使 它 可 能 已 经 在 缓存 中 
(同样 ， 对 于 较 小 的 文件 来 说 这 个 问题 不 大 ， 服 务 器 可 以 发 送 Expires 和 ETag 头 部 ， 确 保 
它 可 以 缓存 在 HTTP 缓存 中 )。 


继续 往 下 看 我 们 的 首页 ， 可 以 看 到 一 个 使 用 谷歌 地 图 JavaScript API 创建 的 地 图 。 每 次 加 
载 页 面 时 ， 这 个 交互 式 地 图 会 从 谷歌 服务 器 进行 加 载 。 由 于 不 能 缓存 谷歌 地 图 的 所 有 逻辑 
和 数据 ， 我 们 可 以 更 新 service worker， 当 检测 到 谷歌 地 图 JavaScript 文件 加 载 失 败 时 ， 提 
供 一 个 替代 的 JavaScript 文件 。 这 个 文件 会 显示 一 张 静 态 的 地 图 图 片 ， 而 不 是 动态 的 、 交 
互 式 的 地 图 控件 。 这 就 是 渐进 增强 的 行为 。 离 线 用 户 看 到 的 地 图 是 静态 图 片 ， 而 在 线 用 户 
将 获得 完全 交互 式 的 地 图 。 

我 们 的 首页 还 加 载 了 一 个 JSON 文件 ， 其 中 包含 即将 在 酒店 发 生 的 事件 列表 。 这 是 随时 可 
以 更 改 的 数据 ， 我 们 希望 用 户 总 是 能 够 看 到 最 新 的 版 本 。 我 们 将 使 用 网 络 优先 ， 缓 存 作为 
回 退 方案 ， 并 频繁 更 新 缓存 模式 来 提供 这 个 文件 。 这 样 可 以 确保 我 们 总 是 能 够 根据 网 络 状 
况 来 提供 最 新 数据 如 果 用 户 在 线 ， 则 显示 实时 数据 ， 否 则 显示 缓存 中 的 最 新 版 本 。 

在 事件 JSON 文件 中 还 包括 了 多 张 图 片 文件 的 引用 ， 每 张 图 片 分 别 表示 一 个 不 同 的 事件 。 
由 于 这 些 文件 在 安装 阶段 没有 被 缓存 ， 我 们 可 以 使 用 按 需 缓存 模式 。 每 次 请 求 这 些 文件 中 
的 任何 一 个 时 ， 我 们 都 会 尝试 从 缓存 中 请 求 。 如 果 在 缓存 中 没有 找到 ， 就 向 网 络 发 起 请 
求 ， 然 后 将 网 络 返 回 的 内 容 存储 到 缓存 中 以 备 下 次 使 用 ， 并 返回 给 页 面 。 


要 确保 页 面 上 不 会 显示 损坏 的 图 像 ， 我 们 还 要 修改 图 像 事 件 的 缓存 代码 ， 以 便 在 缓存 中 找 
不 到 图 像 ， 并 且 在 网 络 不 可 用 时 显示 一 张 默认 的 回 退 图 像 。 在 安装 阶段 ， 默 认 图 像 会 作为 
安装 依赖 项 被 缓存 起 来 。 


最 后 ， 我 们 要 建立 一 项 规则 ， 确 保 数据 统计 请 求 直接 发 送 到 网 络 ， 而 且 不 需要 任何 缓存 或 

者 回 退 。 如 果 用 户 脱 机 ， 这 些 请 求 应 该 会 失败 。 

让 我 们 总 结 一 下 首页 的 缓存 策略 。 

(1) 使 用 缓存 优先 ， 网 络 作为 回 退 方 案 ， 并 频繁 更 新 缓存 模式 返回 index.html 文件 。 

(2) 使 用 缓存 优先 ， 网 络 作 为 回 退 方案 模式 返回 首页 需要 展示 的 所 有 静态 文件 。 

(3) 从 网 络 中 返回 谷歌 地 图 的 JavaScript 文件 。 如 果 请 求 失败 ， 返 回 一 个 替代 的 脚本 。 

(4) 使 用 网 络 优先 ， 缓 存 作为 回 退 方 案 ， 并 频繁 更 新 缓存 模式 ， 返 回 events.json 文件 。 

(5) 使 用 按 需 缓存 模式 返回 事件 的 图 片 文件 ， 如 果 网 络 不 可 用 并 且 图 片 没 有 缓存 ， 则 回 退 到 
默认 的 通用 图 片 。 

(6) 数据 分 析 的 请 求 直接 通过 ， 不 作 处 理 。 


5.5 “实现 缓存 策略 


在 开始 之 前 ， 请 通过 在 命令 行 中 运行 下 列 命令 ， 确 保 你 的 代码 处 于 第 4 章 结束 时 的 状态 。 























































































































































































































拥抱 离线 优先 | 59 


git reset --hard 
git checkout ch05-start 


现在 ， 我 们 通过 更 新 service worker， 让 其 缓存 并 提供 整个 首页 ， 以 及 首 
静态 资源 ， 来 开始 实现 新 的 缓存 策略 了 。 


将 serviceworker.js 中 的 代码 替换 成 下 列 代码 : 


var CACHE_NAME = "gih-cache-v4"; 
var CACHED URLS = [ 
// HTML 
"/index.html", 
// 样式 表 
"/css/gih.css", 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", 
"https://fonts.googleapis.com/css?family=Lato:300,600,900", 
// JavaScript 
"https://code.jquery.com/jquery-3.0.0.min.js", 
"/js/app.js", 
// 图 片 
"/img/Logo.png " ， 
"/img/Logo-header .png" ， 
"/img/event-calendar-link.jpg", 
"/img/switch.png", 
"/img/Logo-top-background.png'" ， 
" /img/jumbo-background.jpg"， 
"/img/reservation-gih.jpg", 
"/img/about-hotel-spa.jpg", 
"/img/about-hoteL-Luxury.jpg" 
]; 





泻 染 所 需 的 所 有 




















self.addEventListener("install", function(event) { 
event .waitUntil( 
caches.open(CACHE_NAME).then(function(cache) { 
return cache.addAlL(CACHED_URLS); 
}) 
); 
]); 


self.addEventListener("fetch", function(event) { 
event.respondWwith( 
fetch(event.request).catch(function() { 
return caches.match(event.request).then(function(response) { 

if (response) { 
return response; 

} else if (event.request.headers.get("accept").includes("text/html")) { 
return caches.match("/index.html"); 


}); 
]) 
); 
}); 


self.addEventListener("activate", function(event) { 
event .waitUntil( 





caches.keys().then(function(cacheNames) { 
return Promise.all( 
cacheNames .map(function(cacheName) { 
if (CACHE_NAME !== cacheName && cacheName.startsWith("gih-cache")) { 
return caches.delete(cacheName); 


} 
}) 
); 
}) 
); 
}); 
这 段 代码 和 第 4 章 结尾 的 代码 非常 相似 ， 除 了 两 个 地 方 有 所 区 别 。 


首先 ， 我 们 替换 了 CACHED_URLS 数组 的 内 容 ， 把 其 中 的 sw-index.html 换 成 index.html， 以 














及 显示 它 所 需要 的 所 有 静态 文件 。 
第 二 处 修改 是 在 fetch 监听 器 中 ， 现 在 从 缓存 中 返回 的 是 index.html 而 不 是 sw-index.html。 


第 二 处 收 
这 两 处 小 变化 足以 让 离线 用 户 的 首页 几乎 和 在 线 用 户 的 保持 一 致 。 
租 即 使 用 户 在 线 ， 也 能 做 到 瞬间 加 载 index.html 和 它 需 要 





上 我 们 进一步 研究 并 改进 它 ， 使 4 
的 所 有 静态 文件 。 
在 serviceworker.js 中 ， 把 fetch 事件 监听 器 的 代码 替换 成 下 列 代码 : 
self.addEventListener("fetch", function(event) { 
var requestURL = new URL(event.request.url); 
if (requestURL.pathname === "/" || requestURL.pathname 
event.respondwith( 
caches .open(CACHE_NAME).then(function(cache) { 
return cache.match("/index.html").then(function(cachedResponse) { 


fed 











"index.html") { 


varfetchpromise = 
fetch("/index.html") 


.then(function(networkResponse) { 
cache.put("/index.html", networkResponse.clone()); 


return networkResponse; 
}); 
return cachedResponse || fetchPromise; 


}); 
}) 

); 
} elseif ( 
CACHED_URLS .includes(requestURL.href) || 

CACHED_URLS .includes(requestURL.pathname) 
){ 
event.respondwith( 

caches .open(CACHE_NAME).then(function(cache) { 
return cache.match(event.request).then(function(response) { 
return response || fetch(event.request); 


}); 


}); 
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现在 ， 新 的 fetch 事件 处 理 器 会 根据 每 个 请 求 的 URL 表现 出 不 同 的 行为 。 

我 们 首先 检测 的 情况 是 请 求 根 域名 或 者 /index.html (两 种 方式 都 可 以 请 求 首 页 ) 。 我 们 使 用 
缓存 优先 ， 网 络 作为 回 退 方 案 ， 并 频繁 更 新 缓存 模式 处 理 这 个 请 求 。 代 码 会 在 缓存 中 查找 
index.html1， 无 论 是 否 找到 ， 代 码 都 会 开始 向 网 络 请 求 并 缓存 最 新 版 本 。 随 后 ， 要 么 立即 返 
回 缓存 的 版 本 ， 要 么 在 缓存 中 找 不 到 的 情况 下 返回 一 个 promise， 并 等 待 其 返回 网 络 响应 。 
由 于 fetch 是 异步 运行 的 ， 在 fetch 完成 之 前 就 可 以 返回 缓存 中 的 响应 。 

这 个 模式 既 可 以 让 我 们 从 缓存 中 得 到 即时 响应 〈 几 毫秒 内 )， 同 时 又 保证 了 HTML 文件 相 
对 较 新 。 

5.2 节 中 解释 了 这 段 代码 的 细节 。 

在 事件 监听 器 的 结尾 ， 我 们 检测 了 请 求 是 否 匹 配 service worker 安装 过 程 中 缓存 的 URL。 
如 果 匹 配 ， 我 们 使 用 缓存 响应 事件 。 如 果 在 缓存 中 没有 找到 ， 我 们 就 党 试 从 网 络 返 回 (这 
就 是 缓存 优先 ， 网 络 作为 回 退 方案 模式 )。 

如 果 请 求 没有 匹配 这 两 个 条 件 中 的 任何 一 个 ， 我 们 让 其 简单 地 通过 service worker， 正 常 处 理 。 















































new URL(urlString, [baseURL]) 


在 fetch 事件 监听 器 中 ， 主 要 的 条 件 语 句 通过 检测 URL 来 决定 如 何 处 理 不 
同 的 请 求 。 在 过 去 ， 这 需要 通过 一 些 相 当 烦 人 的 正则 表达 式 来 完成 。 幸 运 的 
是 ， 相 对 较 新 的 URL 接口 让 我 们 可 以 轻松 完成 这 一 点 : 

// 以 下 三 个 语句 会 返回 相同 的 URL 

var Url_1 = new URL("https://gothamimperial.com/index.html"); 

var UrL_2 = new URL("/index.html", "https://gothamimperial.com"); 
var url_3 = new URL("/index.html", url_1); 























// 下 列 所 有 的 语句 都 为 true 


url_1.href === "https://gothamimperial.com/index.html"; 
url_1.protocol === "https:"; 

url_1.hostname === "gothamimperial.com"; 

url_1.pathname === "/index.html"; 





我 们 刚刚 完成 了 在 5.4 节 中 设 定 的 第 一 个 和 第 二 个 缓存 目标 。 让 我 们 再 给 事件 处 理 器 增加 
几 个 条 件 ， 来 为 不 同 的 资源 进行 自 定义 。 


把 serviceworker.js 的 代码 替换 成 下 列 代码 : 


var CACHE_NAME = "gih-cache-v5"; 

var CACHED_URLS = [ 
// HTML 
"/index.html", 
// 样式 表 
"/css/gih.css", 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", 
"https://fonts.googleapis.com/css?family=Lato:300,600,900", 
// JavaScript 
"https://code.jquery.com/jquery-3.0.0.min.js", "/js/app.js", 
"/js/offline-map.js", 
// 图 片 
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"/img/Logo.png"， 
"/img/Logo-header .png" ， 
"/img/event-calendar-link.jpg", 
"/img/switch.png", 
"/img/Logo-top-background.png'" ， 
"/img/jumbo-background-sm.jpg", 
"/img/jumbo-background.jpg", 
"/img/reservation-gih.jpg", 
"/img/about-hotel-spa.jpg", 
"/img/about-hotel-luxury.jpg", 
"/img/event-default.jpg", 
"/img/map-offline.jpg", 
// JSON 
"/events.json" 
J; 
var googleMapsAPIJS = "https://maps.googleapis.com/maps/api/js?key="+ 
"AIlzaSyDm9jndhfbcWwByQnNnrivoaWAEQA8jy3COdE&callback=initMap"; 


self.addEventListener("install", function(event) { 
event .waitUntil( 
caches.open(CACHE_NAME).then(function(cache) { 
return cache.addALL(CACHED_URLS ) ; 
}) 
); 
]); 


self.addEventListener("fetch", function(event) { 
var requestURL = new URL(event.request.url); 
// 处 理 index.htmL 的 请 求 
if (requestURL.pathname === "/" || requestURL.pathname === "/index.html") { 
event.respondwith( 
caches .open(CACHE_NAME).then(function(cache) { 
return cache.match("/index.html").then(function(cachedResponse) { 
var fetchpromise = fetch("/index.html") 
.then(function(networkResponse) { 
cache.put("/index.html", networkResponse.clone()); 
return networkResponse; 
]); 
return cachedResponse || fetchPpromise; 
]); 
}) 
); 
// 处 理 谷歌 地 图 JavaScript API 文 件 
} else if (requestURL.href === googleMapsAPIJS) { 
event.respondwith( 
fetch( 
googleMapsAPIJS+"&"+Date. now(), 
{ mode: "no-cors", cache: "no-store" } 
).catch(function() { 
return caches.match("/js/offline-map.js"); 
}) 
); 
// 处 理事 件 JSON 文 件 请 求 
} else if (requestURL.pathname === "/events.json") { 
event.respondwith( 
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caches.open(CACHE_NAME) .then(function(cache) { 
return fetch(event.request).then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 
}).catch(function() { 
return caches.match(event.request); 
}); 
}) 
); 
// 处 理事 件 图 片 请 求 
} else if (requestURL.pathname.startsWith("/img/event-")) { 
event.respondwith( 
caches.open(CACHE_NAME).then(function(cache) { 
return cache.match(event.request).then(function(cacheResponse) { 
return cacheResponse || 
fetch(event.request).then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 
}).catch(function() { 
return cache.match("/img/event-default.jpg"); 
]); 








// 处 理 统 计 请 求 
} else if (requestURL.host === "www.google-analytics.com") { 
event.respondwith(fetch(event.request)); 
// 处 理 在 安装 阶段 已 经 缓存 的 请 求 
} else if ( 
CACHED_URLS .includes(requestURL.href) || 
CACHED_URLS .includes(requestURL.pathname) 
) 
event.respondwith( 
caches.open(CACHE_NAME).then(function(cache) { 
return cache.match(event.request).then(function(response) { 
return response || fetch(event.request); 


}); 

















self.addEventListener("activate", function(event) { 
event .waitUntil( 
caches.keys().then(function(cacheNames) { 
return Promise.all( 
cacheNames .map(function(cacheName) { 
if (CACHE_NAME !== cacheName && cacheName.startsWith("gih-cache")) { 
return caches.delete(cacheNanme); 


} 





这 段 代 码 示例 引入 了 一 些 修改 。 





首先 ， 它 添加 一 些 新 文件 到 CACHED_URLS 数组 中 (包括 /js/offline-map.js、/img/event-default. 
jpg、/img/map-offline.jpg 和 /events.json)。 接 下 来 ， 设 置 一 个 新 的 googleMapsAPIJS 变量 ， 
其 中 包含 了 我 们 需要 调用 的 谷歌 地 图 API 的 URL 地址 (在 这 里 设置 一 次 是 为 了 避免 后 续 








重复 )。 最 后 ， 它 在 fetch 事件 监听 器 中 加 入 了 一 些 条 件 判 断 。 








第 一 个 和 最 后 一 个 条 件 保持 不 变 。 在 这 两 个 条 件 之 间 增 加 了 四 个 新 条 件 。 我 们 逐一 








第 一 个 新 的 条 件 是 寻找 谷歌 地 图 JavaScript API 请 求 : 


if (requestURL.href === googleMapsAPIJS) { 
event.respondwith( 
fetch( 
googleMapsAPIJS+"&"+Date.now(), 
{ mode: "no-cors", cache: "no-store" } 
).catch(function() { 
return caches.match("/js/offline-map.js"); 
}) 
); 
} 























来 看 。 


如 果 当 前 请 求 的 是 谷歌 地 图 JavaScript 文件 ， 我 们 会 尝试 从 Web 获取 。 如 果 用 户 离线 ， 请 
求 就 会 失败 ， 我 们 从 缓存 返回 一 个 替代 的 JavaScript 文件 。 这 个 简单 的 JavaScript 文件 ( 称 








为 offline-map.js) 只 包含 了 一 行 代码 : 


document .getElementById("map-container").classList.add("offline-map"); 








如 果 用 户 离线 ， 这 段 代 码 会 取代 谷歌 地 图 API 的 代码 并 运行 ， 并 添加 一 个 名 为 offline- 
map 的 类 名 到 map-container div 中 。 如 果 你 检查 CSS 文件 就 会 发 现 ， 这 个 类 负责 把 div 的 

















背景 图 片 设置 为 地 图 的 静态 图 。 











请 注意 ， 我 们 同时 还 将 静态 图 和 新 的 JavaScript 文件 添加 到 CACHED_ARRAY 数组 中 ， 





在 service worker 安装 的 时 候 ， 这 两 个 文件 都 会 被 缓存 。 














以 确保 


对 于 我 们 的 离线 地 图 代码 ， 最 后 还 有 两 点 需要 注意 。 第 一 ， 在 请 求 谷 歌 地 图 JavaScript 文 
件 时 ， 我 们 需要 通过 no-cors 模式 进行 请 求 ， 否 则 谷歌 的 服务 器 会 拒绝 我 们 的 请 求 (参见 























( 
晶 


附录 C)。 第 二 ， 由 于 谷歌 服务 器 返回 的 地 图 API JavaScript 文件 中 包含 的 头 部 信息 会 导致 
浏览 器 总 是 试图 从 HITP 缓存 中 返回 ， 因 此 我 们 需要 确保 它 总 是 从 网 络 中 请 求 。 否 则 我 


们 的 请 求 操作 不 会 失败 ， 就 会 导致 谷歌 地 图 一 直 控 制 页 面 ( 从 缓存 中 )， 却 不 能 加 载 地 图 





























因为 地 图 数据 没有 被 缓存 )。 在 请 求 时 ， 通 过 把 cache 选项 设置 成 no-store 就 可 以 完全 
E 过 缓存 ， 以 实现 这 一 目标 。 不 幸 的 是 ， 在 本 书 编写 时 ， 并 不 是 所 有 浏览 器 都 支持 这 一 选 











项 ， 因 此 我 们 还 需 在 每 次 请 求 时 ， 往 查询 字符 串 添 加 了 一 个 去 缓存 用 的 时 间 惟 ， 以 确保 每 
次 请 求 都 是 独立 的 ， 并 忽略 缓存 。 只 需要 把 当前 时 间 添 加 到 每 次 请 求 的 URL 后 面 ， 即 可 
实现 这 一 点 。 





























在 fetch 事件 处 理 器 中 ， 第 二 个 新 的 条 件 处 理 了 包含 事件 数据 的 JSON 文件 请 求 : 








if (requestURL .pathname === "/events.json") { 
event.respondwith( 
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Caches.open(CACHE_NAME) .then(function(cache) { 
return fetch(event .request) .then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 
}).catch(function() { 
return caches.match(event.request); 


}); 
]) 
); 
} 

由 于 数据 经 常 变化 ， 我 们 希望 总 能 提供 当前 能 访问 到 的 最 新 数据 ， 所 以 选择 了 网 络 优先 ， 
缓存 作为 回 退 方案 ， 并 频繁 更 新 缓存 模式 。 
首先 ， 我 们 打开 了 缓存 (无 论 网 络 请 求 是 否 成 功 ， 都 需要 进行 这 一 步 )。 然 后 尝试 向 网 络 发 
起 请 求 。 如 果 请 求 成 功 ， 将 响应 放 入 缓存 并 返回 。 否 则 ， 我 们 会 查找 缓存 的 响应 作为 代替 。 


如 果 你 没有 跳 过 第 4 章 ， 可 能 会 注意 到 这 里 存在 一 个 问题 。 我 们 只 有 在 拦截 
fetch 请 求 的 时 候 ， 才 缓存 events.json 文件 。 这 只 能 在 service worker 控制 页 
面 之 后 才能 发 生 。 换 句 话 说， 在 用 户 第 一 次 访问 页 面 时 ， 这 个 文件 是 不 会 缓 
存 的 。 只 有 当 用 户 第 二 次 访问 时 ，service worker 才能 捕获 到 浏览 器 尝试 请 求 这 
个 文件 。 如 果 用 户 在 第 二 次 访问 时 已 经 离线 ， 在 缓存 中 就 不 会 找到 这 个 文件 。 
由 于 service worker 依赖 这 个 文件 存在 于 缓存 中 ， 因 此 我 们 可 以 通过 把 events. 
json 添加 到 CACHED_URLS 数组 中 ， 解 决 这 个 问题 。 这 样 就 可 以 确保 在 service 
worker 安装 时 将 其 缓存 下 来 。 随 后 ， 通 过 刚才 添加 的 代码 ， 就 可 以 在 每 次 连 
续 访 问 时 ， 保 持 其 内 容 不 断 更 新 。 
















































































我 们 继续 来 看 处 理事 件 图 片 请 求 的 条 件 : 


if (requestURL.pathname.startsWith("/img/event-")) { 
event.respondWith( 
caches .open(CACHE_NAME).then(function(cache) { 
return cache.match(event.request).then(function(cacheResponse) { 
return cacheResponse || 

fetch(event.request).then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 

}).catch(function() { 
return cache.match("/img/event-default.jpg"); 


}); 
}) 


由 于 这 些 图 片 经 常 发 生变 化 ， 在 开发 过 程 中 ， 我 们 无 法 获知 客户 在 酒店 里 将 要 举办 什么 事 
件 ， 所 以 我 们 将 按 需 缓存 这 些 资 源 。 

每 当 我 们 检测 到 事件 图 片 的 请 求 时 ， 一 开始 会 打开 缓存 并 试图 寻找 。 随 后 ， 可 能 返回 在 缓 
存 中 找到 的 图 片 ， 也 可 能 会 尝试 从 网 络 中 获取 。 如 果 图 片 请 求 成 功 ， 我 们 就 将 其 放 入 缓 
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存 ， 以 备 将 来 使 用 并 返回 它 。 


如 果 用 户 在 第 二 次 访问 页 面 时 离线 ， 也 会 导致 上 一 个 条 件 中 的 类 似 问 题 。 在 
这 种 情况 下 ， 用 户 会 缓存 events.json 文件 并 尝试 显示 事件 图 片 。 不 幸 的 是 ， 
图 片 还 没有 被 缓存 ， 也 不 能 向 网 络 请 求 。 要 处 理 这 种 边界 情况 ， 可 以 使 用 通 
用 回 退 模式 。 如 果 图 片 没 有 缓存 且 无 法 从 网 络 中 请 求 ， 我 们 就 回 退 到 一 张 通 
用 的 事件 图 片 〈 见 图 5-1)。 

别 忘 了 把 回 退 图 片 (/img/event-default.jpg) 添加 到 CACHED_URLS 数组 中 ， 
以 确保 在 service worker 安装 时 会 将 其 缓存 下 来 。 
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图 5-1: 当 在 缓存 中 找 不 到 图 片 时 ， 显 示 回 退 图 片 
我 们 添加 的 最 后 一 个 条 件 是 处 理 谷歌 分 析 的 请 求 ， 让 其 总 是 响应 网 络 内 容 : 


if (requestURL.host === "www.google-analytics.com") { 
event.respondwith(fetch(event.request)); 


} 


这 段 代 码 有 点 多 余 。 我 们 可 以 简单 地 删除 它 ， 让 浏览 器 使 用 默认 行为 〈 作 用 与 此 处 硬 编码 


的 内 容 一 致 ) 来 处 理 请 求 以 达到 相同 的 效果 。 











处 理 一 些 异 常 。 


华盛顿 邮 报 的 预测 缓存 

对 华盛顿 邮 报 团队 而 言 ， 让 用 户 在 每 次 访问 时 阅读 更 多 文章 是 至 关 重 要 的 ， 
确保 页 面 加 载 尽 可 能 快 就 是 关键 。 

通过 运用 上 述 的 各 种 模式 ， 华 盛 顿 邮 报 团队 已 经 从 他 们 的 渐进 式 Web 应 用 中 
获得 许多 性 能 收益 ， 而 且 ， 他 们 还 创新 性 地 得 到 了 最 大 的 速度 提升 一 一 预测 
缓存 。 























在 哥 谭 帝国 酒店 的 例子 中 ， 可 以 删除 这 段 代 码 。 但 在 你 的 应 用 中 ， 某 些 情况 下 需要 明确 定 
义 这 一 点 。 例 如 ， 代 码 中 可 能 会 有 一 处 处 理 所 有 请 求 的 catch-all， 你 需要 通过 这 种 方式 
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当 你 在 华盛顿 邮 报 网 站 阅读 文章 时 ， 网 站 的 service worker 选择 缓存 的 不 是 
网 站 上 最 流行 的 文章 ， 也 不 是 你 当前 阅读 的 分 类 中 最 流行 的 文章 ， 而 是 将 你 
最 有 可 能 阅读 的 下 一 篇 文章 (也 就 是 直接 从 当前 文章 可 以 直达 的 链接 ) 中 的 
文本 、 图 片 甚至 是 视频 的 前 儿 秒 缓存 下 来 。 

仅 赁 此 改变 ， 团 队 就 让 下 一 篇 文章 的 加 载 时 间 缩 短 到 100 毫秒 左右 。 这 一 改 
进 直接 有 助 于 提升 每 月 文章 阅读 量 和 广告 浏览 量 ， 并 最 终 获 得 更 多 的 订阅 支 
付 用 户 。 








5.6 App shell 架 构 


目前 为 止 ， 规划 缓存 策略 时 ， 我 们 提出 的 方案 比较 适合 于 内 容 站 点 。 但 是 ， 许 多 渐进 式 
Web 应 用 看 起 来 并 不 像 传统 的 内 容 网 站 ， 反 而 更 类 似 于 原生 应 用 。 现 在 ， 我 们 将 注意 力 放 
在 如 何 缓存 并 提供 更 为 动态 的 Web 应 用 上 。 


目前 为 止 ， 我 们 使 用 过 的 工具 和 技术 依然 适用 于 此 。 我 们 将 采用 所 学 到 的 一 切 ， 实 现 一 
个 更 适用 于 Web 应 用 的 缓存 策略 一 一 App shell 架构 (application shell architecture， 简 称 
App shell) 。 


App shell 架构 不 是 一 个 革命 性 的 想法 。 事 实 上 ， 可 能 你 已 经 使 用 了 类 似 的 方法 构建 你 的 
Web 应 用 。 许 多 的 JavaScript 框 刀 和 用 户 界面 ， 以 及 加 载 、 显 示 和 
控制 二 者 所 需要 的 逻辑 分 离 。App shell 架构 鼓励 你 进一步 将 渲染 应 用 大 部 分 基础 界面 所 需 
的 基础 逻辑 和 资源 ， 与 应 用 的 其 他 部 分 隔离 开 来 。 tdi 可 能 轻 量 地 向 用 户 呈 现 一 
个 shell， 随 着 其 变 得 可 用 再 填充 内 容 和 附加 功能 。 它 会 优先 显示 屏幕 上 方 的 结构 与 内 容 ， 
而 不 是 那些 可 以 推迟 处 理 的 结构 。 


App shell 架构 的 目标 是 尽快 向 用 户 提 供 有 意义 的 体验 。 一 个 实现 了 App shell 架构 且 设 计 
良好 的 渐进 式 Web 应 用 ， 会 在 毫秒 级 内 加 载 并 显示 其 基础 界面 。 


让 我 们 将 注意 力 转 回 到 我 们 的 消息 应 用 中 。 可 以 认为 ， 这 款 应 用 的 最 小 shell 
就 是 一 个 头 部 ， 甚 中 包含 应 用 图 标 、 基 本 元 素 以 及 可 以 输入 新 消息 的 输入 杠 
( 见 图 5-2) 。 

下 图 左 侧 显 示 的 最 小 shell， 可 以 在 用 户 首次 访问 时 ， 非 常 快速 地 加 载 。 随 后 
会 将 其 缓存 起 来 ， 以 便 在 用 户 随后 的 访问 中 ， 都 可 以 在 毫秒 级 内 加 载 。 一 旦 
这 个 shell 演 染 完成 ， 应 用 就 可 以 从 网 络 加 载 新 的 内 容 以 及 一 些 额外 的 脚本 ， 
以 开启 应 用 的 其 余 功 能 

这 种 策略 可 以 让 你 创建 一 个 几乎 实时 响应 的 应 用 。 它 在 第 一 时 间 就 给 用 户 呈 
现 了 界面 ， 而 不 是 让 用 户 盯 着 一 个 空白 屏幕 并 等 待 网 络 做 出 响应 。 用 户 甚至 
可 以 马上 开始 输入 新 消息 ， 甚 他 内 容 和 功能 将 会 在 后 台 加 载 。 























































































































msger Q : msger lk 


TIMELINE MENTIONS MESSAGES TIMELINE MENTIONS MESSAGES 


Ran Magen @rmen im 
We put a man on the moon, and yet we can't 
come up with a new analogy for a successful 


achievement except "we put a man on the moon'"? 


Tal Ater @TalAter 2h 
A GitHub issue and pull request template 
generator featuring Chtulhu and Lewis Carroll 


https://www.talater.com/open-source-te.. 


Chuck Facts @chuckfacts 2h 
When Alexander Bell invented the telephone he 
had 3 missed calls from Chuck Norris. 


Delicious Israel @Deliciouslsrael 2h 
This cold and icey summer dessert/drink called 
Falooda is exactly what you want in summer. 
https://www.instagram.com/p/BHNLURMBauD/ 


Type message... Type message... 








140 140 











最 小 App shell 架 构 App 完 整 加 载 








图 5-2: App shell 架构 和 完整 功能 的 对 比 


在 规划 App shell 架构 时 ， 努 力 为 泻 染 基础 用 户 界 面 提 供 尽 可 能 少 的 HIML、CSS、 
JavaScript 和 图 片 ， 让 这 个 shell 尽 可 能 地 精简 ， 这 样 当 用 户 第 一 次 访问 应 用 时 ， 它 就 可 以 
尽快 加 载 并 运行 。 然 后 ， 它 应 该 立即 存储 到 缓存 中 ， 以 便 在 后 续 的 访问 中 可 以 在 网 络 调用 
之 前 加 载 。 这 样 可 以 使 得 用 户 界 面 在 几 毫 秒 内 完成 加 载 。 一 旦 初始 shell 呈现 给 用 户 后 ， 应 
用 就 可 以 填充 内 容 ， 并 扩展 更 多 功能 。 


不 要 忘 了 ，Web 的 核心 优势 之 一 是 能 够 直接 链接 到 内 容 。 在 规划 App shell 架构 时 ， 要 记 
住 用 户 可 能 不 会 总 是 从 首页 开始 访问 。App shell 应 该 兼顾 用 户 在 首页 或 用 户 管理 页 开始 访 
问 。 在 图 5-2 中 可 以 看 到 ，App shell 无 论 在 时 间 线 、 他 人 提 及 还 是 在 消息 页 启动 ， 都 是 可 
用 的 。 


拥抱 这 一 策略 后 ， 你 就 可 以 创建 儿 乎 即时 加 载 的 应 用 ， 在 第 一 时 间 向 用 户 呈 现 内 容 ， 而 不 
是 让 用 户 盯 着 空白 页 面 ， 等 待 网 络 响应 。 你 创建 出 的 用 户 体验 将 会 更 加 接近 原生 应 用 ， 而 
不 是 传统 的 Web 体验 。 


在 初始 泻 染 时 包含 内 容 
没有 任何 规则 声明 ， 使 用 了 App shel 架构 的 应 用 在 第 一 次 党 奖 页 而 时 应 该 只 显示 一 个 空 


shell， 然 后 等 待 网 络 显示 任何 内 容 。 不 同情 况 有 不 同 的 处 理 ， 或 许 对 于 你 的 应 用 来 说 ,在 
初始 泻 染 时 将 缓存 内 容 和 shell 一 起 渲染 会 更 加 合适 ， 即 使 内 容 可 能 是 过 时 的 。 
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在 将 内 容 包 含 到 初始 泻 染 之 前 ， 先 要 问 自 己 两 个 问题 。 

(1) 泻 染 缓存 中 可 能 过 时 的 内 容 ， 然 后 在 几 秒 钟 之 后 使 用 网 络 中 的 新 内 容 替 换 它 ， 对 于 用 户 
体验 是 一 种 损害 还 是 一 种 提升 ? 

(2) 检索 并 泻 染 缓存 内 容 ， 会 显著 影响 应 用 的 初始 加 载 时 间 和 泻 染 速度 吗 ? 

在 我 们 的 示例 消息 应 用 中 ， 我 们 可 以 认为 ， 将 缓存 中 存储 的 旧 消 息 作 为 初始 泻 

染 的 一 部 分 ， 可 以 改进 用 户 体验 。 已 经 缓存 的 消息 可 以 很 快 被 泻 染 ， 当 新 消息 

到 达 时 ， 将 旧 的 消息 推 往 下 方 ， 这 也 是 应 用 正常 流程 的 一 部 分 ( 见 图 5-3)。 

第 6 章 会 讨论 如 何 将 这 类 消息 的 数据 存储 到 本 地 数据 库 中 ， 并 使 用 它们 来 填 

充 具 有 内 容 的 App shell。 



































TIMELINE MENTIONS MESSAGES TIMELINE MENTIONS MESSAGES 





loading newer messages 


IType message Type message 
































最 简 App shell + 缓存 的 过 时 内 容 = 初始 泻 染 





图 5-3; 在 初始 泻 染 中 ， 将 App shell 和 缓存 内 容 相 结合 


正如 我 们 看 到 的 那样 ， 并 没有 什么 硬性 规则 告诉 我 们 App shell 应 该 或 者 不 应 该 做 什么 (也 
没有 一 个 适合 所 有 应 用 的 架构 )。 在 规划 应 用 的 基本 shell 时 ， 可 以 问 问 自己 : 哪些 组 件 对 
于 初始 泻 染 是 至 关 重要 的 ?哪些 组 件 不 依赖 于 数据 变化 ， 并 且 总 是 可 以 从 缓存 中 提供 的 ? 
是 否 有 一 些 复杂 逻辑 ， 可 以 在 基础 界面 泻 染 之 后 才 延 迟 加 载 ? 原生 应 用 的 开发 者 是 如 何 应 
对 这 些 情况 的 ? 








5.7 ”实现 App shell 
目前 为 止 ， 我 们 只 关注 了 哥 谭 帝国 酒店 的 首页 。 让 我 们 将 注意 力 转移 到 用 户 账号 页 面 。 


用 户 账号 页 面 会 在 用 户 点 击 应 用 右上 和 角 的 “My Account” 链 接 ， 或 者 用 户 试图 发 起 新 的 预 
订 时 显示 。 这 是 一 个 简单 的 单 页 应 用 ， 其 中 包含 了 用 于 预订 的 控件 ， 并 且 会 加 载 和 泻 染 一 
个 事件 列表 以 及 用 户 的 预订 。 
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这 个 页 面 非常 适合 采用 App shell 架构 。 

在 规划 缓存 策略 时 ， 首 先 要 查看 构成 应 用 的 不 同 组 件 。 应 用 中 的 哪些 部 分 可 以 被 缓存 下 

来 ， 并 且 作 为 App shell 的 一 部 分 立即 演 染 呢 ? 

(1) 页 面 的 基础 布局 包含 了 简单 的 HTML 标记 和 简单 的 样式 表 。 这 两 者 都 可 以 被 缓存 ， 泻 
染 相 对 较 快 。 

(2) 页 眉 和 页 脚 包含 了 一 个 酒店 标志 的 PNG 文件 。 由 于 这 个 标志 是 酒店 品牌 的 重要 组 成 部 
分 ， 并 且 文 件 体积 相对 较 小 〈7KB ) ， 我 们 将 甚 包含 在 App shell 中 。 

(3) 页 眉 包 含 了 一 张 哥 谭 天 际 线 的 大 背景 图 。 这 是 一 个 可 以 延迟 加 载 的 典型 示例 ， 我 们 不 需 
要 将 其 包含 在 App shell 中 。 

(4) 预订 列表 和 事件 列表 的 数据 都 是 通过 Ajax 进行 加 载 的 。 这 些 内 容 可 以 在 初始 App shell 
加 载 并 泻 染 之 后 ， 再 添加 到 页 面 中 。 

我 们 的 账号 页 面 已 经 被 构造 成 : 先 泻 染 一 个 最 小 shell， 随 后 动态 加 载 剩余 内 容 ( 见 图 

5-4)。 现 在 要 实现 缓存 策略 就 简单 了 ， 只 需要 在 service worker 安装 时 ， 缓 存 三 个 额外 的 请 

求 (账号 页 面 的 HTML、 其 JavaScript 文件 ， 以 及 预订 的 JSON 文件 )， 并 且 在 fetch 事件 

监听 器 中 添加 两 个 条 件 ， 处 理 my-account.html 和 reservations.json 文件 的 请 求 即 可 。 









































Arrival: 


dd/mm/yyyy 


#0of nights: 


Check Availability 





Loading reservation data... 











图 5-4: 账号 页 面 的 空 App shell 


在 Serviceworkerjs 中 ， 添 加 my-account.html、/js/my-account.js 和 /reservations.json 到 CACHED_ 
URLS 数组 中 。 
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同时 ， 在 该 文件 中 ， 在 fetch 事件 监听 器 检查 index.html 请 求 条 件 的 后 面 ， 补 充 下 列 两 个 





条 件 : 





} else if (requestURL.pathname === "/my-account") { 


event.respondWwith( 











caches.match("/my-account.html").then(function(response) { 
return response || fetch("/my-account.html"); 


}) 


} else if (requestURL.pathname === "/reservations.json") { 


event.respondWwith( 


caches .open(CACHE_NAME).then(function(cache) { 
return fetch(event.request).then(function(networkResponse) { 


cache.put(event.request, networkResponse.clone()); 


return networkResponse; 
}).catch(function() { 


return caches.match(event.request); 


}); 
]) 
); 


在 第 一 个 条 件 中 ， 使 用 缓存 优先 ， 网 络 作为 回 退 方案 模式 返 
HTML 内 容 。 第 二 个 条 件 通过 网 络 优先 ， 缓 存 作为 回 退 方 案 ， 并 频繁 更 新 缓存 模式 提供 
reservations.json 文件 (类 似 于 缓存 并 提供 events.json 的 方式 ) 。 











通过 这 些微 小 的 修改 ， 现 在 My Account 页 罩 

















回 了 My Account 页 面 的 























i 的 App shell 可 以 在 毫秒 级 内 向 用 户 提供 有 意 


义 的 体验 。 酒 店 的 所 有 品牌 元 素 以 及 屏幕 上 方 的 大 部 分 内 容 都 将 立即 呈现 。 预 订 的 小 部 件 
立即 可 用 ， 并 且 可 以 毫 无 延迟 地 使 用 。 初 始 shell 泻 染 完成 后 ， 动 态 的 预订 和 事件 数据 才 会 





被 加 载 和 显示 。 


5.8 解锁 成 就 


是 的 ， 能 够 将 我 们 的 应 用 泻 染 给 离线 用 户 非常 棒 。 但 除 此 之 外 ， 本 章 还 极 大 地 改善 了 有 连 


接 用 户 的 体验 。 
执 开 对 离线 用 户 的 明显 改进 ， 很 容易 忽略 我 人 








门 在 本 章 中 取得 的 所 有 成 就 ， 以 为 只 是 一 点 小 








改进 。 毕 竞 ， 我 们 正在 通过 一 种 不 现实 的 快速 连接 本 地 服务 器 的 方式 来 查看 网 站 。 





让 我 们 来 获取 一 些 新 的 想法 。 








在 Chrome 开发 者 工具 中 ， 我 们 可 以 模拟 不 同 的 连接 速度 (参见 4.8 节 了 解 详情 ) ， 并 精确 























地 测量 结果 。 





让 我 们 来 看 看 使 用 3G 连接 访问 首页 的 加 载 情况 。 




















DOM ready 事 件 耗 时 总 加 载 时 间 带宽 使 用 
不 使 用 SW， 首 次 访问 1200 毫秒 13 秒 1.1MB 
不 使 用 SW， 二 次 访问 。 587 毫秒 49 秘 es 
使 用 SW， 首次 访问 1200 毫秒 13 秒 1.1MB 
使 用 SW， 二 次 访问 155 毫秒 1.1 秒 29.7KB 
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不 管 是 否 使 用 service worker， 用 户 首次 访问 页 面 都 需要 经 过 13 秒 的 加 载 时 间 ， 带 宽 的 使 
用 量 也 接近 。 但 是 一 旦 用 户 浏 览 过 我 们 的 网 站 ， 后 续 每 次 访问 的 差异 就 会 使 人 大 吃 一 惊 。 
。 使 用 service worker 后 ， 页 面 加 载 速度 提升 至 原来 的 4.5 倍 。 

。 使 用 service worker 后 ，DOM ready 事件 的 触发 速度 提升 至 原来 的 3.8 倍 。 

。 用 户 需 要 下 载 的 数据 量 减 少 了 91%， 大 大 降低 了 用 户 的 成 本 以 及 我 们 的 托管 成 本 。 


用 户 从 首页 导航 到 账号 页 面 也 能 看 到 巨大 的 收益 。 
































DOM ready 事 件 耗 时 总 加 载 时 间 带宽 使 用 
不 使 用 SW 578 毫秒 1 秒 28.9KB 
使 用 SW 150 毫秒 0.6 秒 14.9KB 


DOM 完全 加 载 的 时 间 缩 短 了 428 上 毫秒， 看 起 来 无 足 轻重 ,但 是 在 我 看 来 绝 非 如 此 。 用 户 点 
击 “My Account” 按 钮 时 ， 下 一 屏幕 的 加 载 时 间 (从 578 毫秒 到 150 毫秒 ) 的 差异 ， 就 相当 
于 Web 页 面 跳 转 和 原生 页 面 跳 转 的 时 间 差 异 。 在 第 6 章 中 ， 我 们 将 进一步 改进 这 个 页 面 。 
只 需 几 个 基础 的 构建 模块 以 及 一 些 常 见 的 缓存 模式 ， 我 们 就 能 用 短 短 几 行 代码 取得 非凡 的 
效果 ， 既 提高 了 用 户 体验 ， 又 减少 了 带宽 的 使 用 量 (为 用 户 省 钱 的 同时 ， 也 降低 了 我 们 的 
成 本 )。 





要 创建 离线 优先 的 应 用 ， 除 了 处 理 连接 的 变化 ， 还 需要 做 更 多 工作 。 
当 我 们 改进 了 离线 功能 的 支持 时 ， 也 出 现 了 新 的 用 户 体验 挑战 。 例 如 : 
。 我 们 如何 告知 线 用 户 ， 他 看 到 的 是 缓存 内 容 而 且 可 能 是 过 时 的 。 

。 我 们 如 何 保证 用 户 的 修改 即使 在 断 开 连接 的 情况 下 也 不 会 丢失 ? 
在 第 11 章 中 ， 我 们 将 会 更 深入 地 探索 这 些 UX 挑战 。 


























5.9 小 结 


本 章 给 予 我 们 一 些 很 好 的 机 会 来 学 习 常 见 的 缓存 模式 ， 并 在 “离线 优先 ”的 路 上 逐一 运用 
这 些 模式 来 解决 不 同 的 挑战 。 

希望 本 章 所 概述 的 不 同 缓存 模式 可 以 帮助 你 一 路 前 行 。 请 记 住 ， 这 些 模式 不 是 固定 的 模 
板 。 有 时 候 你 需要 组 合并 配对 使 用 (例如 ， 我 们 的 事件 图 片 代码 既 使 用 了 按 需 缓存 ， 又 实 
现 了 通用 回 退 模式 )， 有 了 时候 你 还 需要 提出 一 些 完全 不 同 的 方案 例如， 如果 客 户 端 不 支 
持 通 用 回 退 图 片 ， 我 们 可 能 要 考虑 在 安装 阶段 解析 events.json 文件 ， 并 缓存 其 中 的 图 片 )。 
要 解锁 离线 优先 ， 是 没有 任何 预 设 的 公式 适合 你 的 Web 应 用 的 。 在 规划 应 用 策略 时 ， 始 终 
要 考虑 每 个 资源 是 如 何 使 用 、 何 时 使 用 的 。 要 权衡 每 个 资源 保持 最 新 对 于 性 能 的 潜在 收益 


与 影响 。 


始终 首先 考虑 用 户 的 行为 与 需求 ， 并 以 此 为 指导 ， 找 出 最 佳 用 户 体验 的 实现 。 
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使 用 IndexedDB 在 本 地 存储 数据 





目前 为 止 ， 我 们 使 用 CacheStorage 存储 所 有 文件 以 及 应 用 所 需 的 数据 。 当 想 要 存储 一 份 预 
订 列 表 时 ， 我 们 简单 地 在 CacheStorage 中 缓存 了 一 个 HTTP 响应 ， 其 中 包含 了 一 个 JSON 
数据 文件 。 随 后 我 们 可 以 在 缓存 中 取出 该 文件 ， 并 且 在 每 次 访问 预订 列表 时 ， 解 析 这 份 数 
据 。 但 是 ， 如 果 用 户 发 起 了 新 的 预订 ， 或 者 预订 状态 发 生 了 改变 ， 会 发 生 什 么 呢 ? 这 种 情 
况 下 ， 我 们 不 得 不 求助 于 服务 器 ， 加 载 一 个 最 新 的 JSON 文件 。 


虽然 我 们 的 应 用 目前 在 任何 连接 状态 下 都 可 以 进行 操作 但是， 如 果 连 最 简单 的 数据 操作 
都 依赖 于 服务 器 ， 是 否 真 的 可 以 称 之 为 离线 优先 呢 ? 


我 们 需要 一 种 更 好 的 方法 来 在 浏览 器 中 持久 地 处 理 数 据 。 这 种 方法 应 该 可 以 让 我 们 在 本 地 
存储 、 读 取 和 修改 数据 ， 而 不 依赖 于 网 络 状态 。 


在 本 章 中 ， 我 们 将 把 这 个 重要 的 工具 添加 到 工具 集 ， 学 习 如 何 使 用 一 个 称 为 IndexedDB 的 
本 地 数据 库 。 


和 服务 端 数据 库 一 样 ，IndexedDB 允许 我 们 以 结构 化 的 方式 存储 、 查 询 并 修改 数据 等 。 和 
服务 端 数据 库 不 同 的 是 ，IndexedDB 可 以 完全 在 浏览 器 中 实现 这 一 切 操 作 。 

本 章 首先 会 概述 IndexedDB 及 其 语法 ， 我 们 在 此 试验 的 代码 将 与 哥 谭 帝国 酒店 无 关 。 随 
后 ， 我 们 会 结合 所 学 的 知识 ， 在 哥 谭 帝国 酒店 应 用 中 实现 它们 。 

在 本 章 结尾 ， 我 们 将 会 添加 一 个 本 地 数据 库 到 哥 谭 帝国 酒店 应 用 中 ， 无 论 用 户 连 接 状 态 如 
何 ， 它 都 可 以 正常 工作 。 我 们 将 会 拥有 一 个 可 以 在 毫秒 级 别 内 加 载 的 应 用 ， 并 在 不 依赖 服 
务 器 的 情况 下 显示 内 容 并 操作 数据 。 和 原生 应 用 类 似 ， 我 们 的 渐进 式 Web 应 用 仅 在 从 服务 
器 获取 更 新 的 数据 和 内 容 ， 或 者 将 用 户 操作 传 回 给 服务 器 时 ， 才 需要 连接 到 网 络 。 
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6.1 什么 是 IndexedDB 
IndexedDB 是 浏览 器 中 的 事务 型 对 象 存储 数据 库 。 
在 这 个 关键 词 丰 富 、 定 义 令 人 困惑 的 描述 ( 它 可 以 轻易 地 容纳 很 多 标签 ， 让 整个 营销 部 门 
忙碌 数 周 ) 背后 ， 其 实 是 一 些 简 单 的 概念 。 让 我 们 将 这 句 话 拆 解 开 来 ， 逐 一 解释 各 个 词 的 
含义 。 
IndexedDB 是 事务 型 的 
你 在 IndexedDB 中 执行 的 操作 会 按照 事务 来 分 组 。 在 一 个 事务 中 ， 要 么 所 有 操作 都 成 
功 ， 要 么 所 有 操作 都 失败 。 
假设 你 的 数据 库 是 为 银行 网 站 的 用 户 存 储 余额 的 。 如 果 你 试图 i 
美元 从 Jil 转账 给 Jake， 这 笔 交 易 会 包含 两 个 操作 。 
(1) 从 Jil 的 账户 减 去 7 美元 。 
(2) 给 Jake 的 账户 增加 7 美元 。 
如 果 Jil 只 有 2 美元 ， 第 一 个 操作 就 会 失败 ， 但 第 二 个 操作 成 功 ， 这 样 你 只 会 为 银行 创 
造 了 7 美元 的 赤字 。 如 果 第 一 个 操作 成 功 ， 但 第 二 个 操作 因为 Jake 的 账户 被 冻结 而 失 
败 ， 你 就 抹 去 了 7 美元 的 存在 。 通 过 把 操作 组 合成 单个 事务 ， 我 们 就 可 以 确保 : 要 么 所 
有 操作 失败 ， 钱 不 会 被 转移 ， 要 么 所 有 操作 成 功 ， 银 行 可 以 收取 6 美元 的 手续 费 。 
IndexedDB 是 对 象 存储 数据 库 
与 传统 的 关系 型 数据 库 (例如 MySQL 和 SQL Server) 包含 了 预定 义 数据 列 、 按 行 存储 
的 表格 不 同 ， 对 象 存 储 数据 库 是 存储 对 象 的 。 每 个 数据 库 可 以 包含 多 个 对 象 存 储 ， 每 个 
对 象 存储 可 以 包含 多 个 对 象 。 这 些 “ 对 象 ” 可 以 是 JavaScript 对 象 、 布 尔 值 、 数 字 、 二 
进 制 块 ， 以 及 JavaScript 可 以 处 理 的 大 部 分 其 他 数据 单元 。 
你 可 能 已 经 熟悉 另 一 个 常用 于 描述 这 类 数据 库 的 词 一 一 NoSQL。 
在 上 述 的 银行 数据 库 例 子 中 ， 可 能 包含 了 一 个 客户 对 象 的 存储 ， 其 中 包含 了 很 多 对 象 ， 
每 个 对 象 代表 一 个 客户 。 每 个 客户 对 象 包含 姓氏 、 名 字 、 人 余额 、 最 后 登录 时 间 以 及 最 后 
10 次 的 存款 记录 。 
IndexedDB 是 索引 数据 库 
和 传统 的 关系 型 数据 库 系统 类 似 ，IndexedDB 也 使 用 了 索引 。 你 可 以 在 任何 对 象 存储 中 
添加 索引 ， 并 使 用 它 来 检索 需要 的 对 象 。 
在 我 们 的 示例 银行 客户 对 象 存储 中 ， 可 能 包含 了 一 个 用 户 姓氏 的 索引 。 这 样 我 们 就 可 以 
轻松 找到 姓氏 为 Dwayne 的 用 户 。 它 还 可 能 包括 了 最 后 登录 时 间 的 索引 ， 让 我 们 可 以 检 
索 到 最 后 10 个 登录 到 应 用 的 用 户 。 
IndexedDB 是 基于 浏览 器 的 
IndexedDB 完全 基于 浏览 器 运行 。 不 管用 户 连接 状况 如 何 ， 都 可 以 访问 并 操作 已 经 存储 
其 中 的 任何 数据 。 
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这 是 一 把 双 刃 剑 。 你 在 本 地 数据 库 中 的 任何 修改 都 不 会 自动 反映 到 服务 器 。 如 何 将 本 地 
修改 上 传 到 服务 器 ， 或 者 从 服务 器 同步 变更 到 本 地 数据 库 ， 完 全 取决 于 你 。 


有 很 多 开源 库 可 以 简化 本 地 数据 库 和 服务 器 之 间 的 数据 传播 。 在 6.8 节 中 ， 我 们 会 探索 
其 中 几 个 。 


除了 上 述 这 些 IndexedDB 核心 概念 之 外 ， 在 使 用 IndexedDB 时 ， 还 需要 牢记 更 多 的 内 容 。 


。 你 可 以 创建 多 个 数据 库 (虽然 大 部 分 应 用 通常 只 会 创建 一 个 数据 库 )。 

。 每 个 数据 库 中 可 以 包含 多 个 对 象 存储 。 

。 每 个 对 象 存储 通常 只 包含 一 种 数据 类 型 (例如 用 户 类 型 、 聊 天 消息 类 型 、 预 约 类 型 等 )。 

。 对 象 存储 包含 键 值 对 。 

。 值 几 乎 可 以 是 任何 可 以 用 JavaScript 表示 的 内 容 , 包括 对 象 、 数 字 , 布尔 值 .字符 串 、 日 期 、 
数组 、 正 则 表达 式 、undefined 和 null。 

。 键 用 来 引用 对 象 存储 中 的 某 个 值 。 键 可 以 是 简单 的 数字 标识 符 ， 或 者 是 指向 值 中 的 特定 
路 径 。 例 如 ， 如 果 我 们 存储 用 户 数据 ， 每 个 值 是 一 个 包含 了 姓氏 、 名 字 、 护 照 编 号 的 对 
象 ， 那 么 我 们 可 以 把 护照 编号 作为 对 象 的 键 。 

。 IndexedDB 遵循 同 源 策 略 ， 确 保 用 户 在 访问 任意 Web 站 点 时 ， 不 必 担 心 数 据 会 被 另 一 
个 网 站 读 取 。 换 句 话 说， 你 可 以 在 你 的 域 中 读 写 数据 ， 但 是 不 能 访问 或 者 写 入 另 一 个 域 
的 IndexedDB 数据 。 

。 数据 库 是 版 本 控制 的 。 如 果 你 想 要 创建 对 象 存储 ， 或 者 修改 其 结构 ， 可 以 通过 新 的 版 本 
号 打开 数据 库 连 接 。 这 会 触发 一 个 upgrade needed 事件 。 在 这 个 事件 期 间 ， 可 以 进行 
此 版 本 和 旧版 本 之 间 的 任何 数据 库 更 改 。 

。 大 部 分 的 mdexedDB 操作 都 是 异步 的 。 如 果 你 请 求 获取 一 个 值 ，API 不 会 简单 地 返回 这 
个 值 。 反 之 ， 你 需要 定义 一 个 回调 函数 来 处 理 这 个 事件 。 当 回调 函数 被 调用 时 ， 它 将 会 
包含 你 所 请 求 的 值 。 

如 果 你 以 前 使 用 过 NoSQL 数据 库 ， 可 能 对 其 中 大 多 数 概念 已 经 很 熟悉 了 。 即 使 你 没有 ， 

使 用 IndexedDB 也 是 很 简单 的 。 


大 部 分 和 IndexedDB 的 交互 都 可 以 提炼 成 以 下 这 种 基本 模式 ， 你 将 会 反复 使 用 到 。 















































() 打开 数据 库 。 
(2) 启动 事务 ， 用 来 读 取 或 写 和 对象 存储 。 
(3) 打开 对 象 存储 。 
(4) 在 对 象 存 储 中 执行 操作 (检索 对 象 、 添 加 对 象 、 删 除 对 象 等 )。 
(5) 完成 事务 。 
IndexedDB 浏览 器 支持 


从 历史 上 看 ，IndexedDB 声名 狼藉 。 这 主要 是 因为 在 Safari 以 及 iOS 8 和 iOS 9 
上 其 实现 非常 糟糕 ， 并 且 在 iOS webview 中 完全 缺乏 支持 。 

幸运 的 是 ，ImdexedDB 最 近 的 遭遇 已 经 好 多 了 。 截 至 2017 年 本 书 (英文 版 ) 
出 版 时 ，IndexedDB 可 以 在 大 多 数 现代 训 览 器 中 运行 良好 (除了 Opera Mini)。 










































































对 于 需要 支持 旧 浏 览 器 的 场景 (包括 下 9 或 以 下 、 安 卓 浏 览 器 4.3 或 以 下 )， 
6.8 节 探 索 了 一 系列 的 库 ， 它 们 可 以 通过 回 退 到 替代 技术 的 方式 支持 旧 浏 览 
器 ， 例 如 WebSQL 和 localStorage。 
即使 你 选择 忽略 旧 浏 览 器 ， 也 最 好 在 使 用 IndexedDB 之 前 进行 功能 检测 。 在 
6.4 节 中 ， 可 以 看 到 这 一 点 。 









































6.2 ”使 用 IndexedDB 

虽然 IndexedDB 因为 有 点 混乱 而 声名 狼藉 ， 但 是 我 们 会 采取 一 种 实用 的 、 动 手 实 践 的 方式 
来 快速 理解 它 背 后 的 核心 原理 ， 并 在 短 时间 内 取得 具体 的 结果 。 
在 6.8 节 中 我 们 会 看 到 一 些 实用 的 库 ， 它 们 令 使 用 IndexedDB 的 体验 更 加 愉快 。 

上 我 们 现在 开始 探索 吧 。 

IndexedDB 

本 节 中 的 代码 用 于 一 般 性 地 阐述 IndexedDB ， 而 不 属于 哥 谭 帝国 酒店 网 站 。 

要 跟随 代码 ， 可 以 在 你 喜欢 的 代码 编辑 器 中 打开 /public/indexeddb.html， 并 在 


<script> 标签 中 进行 修改 。 下 一 步 ， 在 开发 服务 器 已 经 运行 的 前 提 下 (在 2.4 
节 中 已 做 解释 )， 在 浏览 器 中 打开 http://localhost:8443/indexeddb.html 即 可 。 


我 们 将 在 6.4 节 中 回 到 哥 谭 帝国 酒店 。 
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6.2.1 打开 数据 库 连 接 
使 用 IndexedDB 的 第 一 步 是 打开 数据 库 连 接 。 
在 indexeddb.html 中 添加 下 列 代 码 : 


var request = window.indexedDB.open("my-database", 1); 








request.onerror = function(event) { 
console.log("Database error: ", event.target.error); 


}; 


request.onsuccess = function(event) { 
var db = event.target.result; 
console.log("Database: ", db); 
console.log("Object store names: ", db.objectStoreNames); 


}; 


即使 是 最 基本 的 IndexedDB 代码 示例 ， 也 体现 了 IndexedDB 的 异步 性 质 。 调 用 window. 
indexedDB.open() 之 后 ， 并 没有 返回 一 个 数据 库 连接 。 取 而 代 之 的 是 ， 它 返回 一 个 打开 数 
据 库 连接 的 请 求 。 随 后 我 们 可 以 监听 这 个 请 求 的 事件 ， 例 如 success 或 者 error 事件 。 


当 你 在 浏览 嚣 中 运行 这 段 代码 时 ， 会 在 浏览 器 中 创建 一 个 名 为 ny-database 的 数据 库 ， 并 












































使 用 IndexedDB 在 本 地 存储 数据 | 77 


打开 (如果 已 经 存在 ， 则 直接 打开 ， 不 会 执行 创建 )。 随 后 会 触发 success 事件 ， 我 们 可 以 
在 其 中 使 用 IDBDatabase 对 象 ， 将 其 打印 到 控制 台 ， 并 且 连 同 这 个 全 新 数据 库 中 的 对 象 存 
储 列表 一 起 打印 出 来 。 

由 于 我 们 的 数据 库 现 在 仍然 是 空 的 ， 所 以 这 对 于 我 们 没有 作用 。 让 我 们 添加 一 个 对 象 存 储 
到 数据 库 中 ， 其 中 包含 一 份 银行 客户 列表 。 


6.2.2 ”数据 库 版 本 /修改 对 象 存储 


和 service worker 非常 相似 ，IndexedDB 数据 库 也 是 版 本 化 的 。 每 当 我 们 想 要 修改 数据 库 的 
结构 ， 例 如 添加 、 修 改 或 删除 对 象 存储 时 ， 就 需要 创建 一 个 新 版 本 。 


我 们 可 以 通过 增加 版 本 号 并 作为 第 二 个 参数 传递 给 indexedDB.open()， 来 创建 一 个 新 的 数 

据 库 版 本 。 当 浏览 器 检测 到 版 本 号 大 于 现 有 版 本 时 ， 就 会 触发 upgrade needed 事件 。 我 们 

可 以 监听 这 个 事件 ， 并 使 用 它 来 修改 数据 库 。 

在 上 述 示例 代码 的 末尾 ， 添 加 下 列 代码 : 
request.onupgradeneeded = function(event) { 
var db = event.target.result; 
db.createObjectStore("customers", 

{ keyPath: "passport_number" } 

); 
}; 

当 数 据 库 触 发 upgrade needed 事件 时 ， 这 上段 代码 就 会 执行 。 它 可 以 从 事件 中 获取 数据 库 对 

象 ， 并 在 其 中 创建 一 个 名 为 customers 的 新 对 象 存储 。 它 还 使 用 了 keyPath 属性 ， 定 义 了 

护照 编号 作为 存储 中 每 个 对 象 的 唯一 键 。 

刷新 页 面 ， 并 查看 记录 到 控制 台中 的 数据 库 对 象 。 


Database: IDBDatabase {name: "my-database", version: 1, objectStoreNames: DOMString..} 
Object store names: PDOMStringList {length: @} 
> 


控制 台中 的 第 二 行 清 晰 地 显示 出 ， 我 们 的 数据 库 中 仍然 没有 包含 任何 对 象 存储 。 这 是 为 什 
么 呢 ? 答案 在 第 一 行 。 数 据 库 依然 是 版 本 1， 所 以 我 们 的 upgrade needed 事件 没有 触发 。 
让 我 们 将 代码 中 第 一 行 的 版 本 号 修改 为 2: 

var request = window.indexedDB.open("my-database", 2); 


刷新 页 面 并 查看 控制 台 ， 现 在 应 该 可 以 看 到 ， 数 据 库 已 经 成 功 更 新 到 版 本 2， 其 中 包含 了 
一 个 名 为 customers 的 对 象 存储 : 


Database: P IDBDatabase {name: "my-database", version: 2, objectStoreNames: DOMString..} 











































































































0bject store names: PDOMStringList {0: "customers", length: 1} 














6.2.3 ”添加 数据 到 对 象 存储 


要 让 数据 存储 发 挥 作用 ， 还 需要 让 其 存储 一 些 对 象 。 让 我 们 往 里 添加 儿 个 用 户 。 





} 
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在 浏览 器 中 打开 http://localhost:8443/indexeddb.html 之 后 ， 在 浏览 器 控制 台中 运行 以 下 代码 : 





var request = window.indexedDB.open("my-database", 2); 


request.onsuccess = function(event) { 


var db = event.target.result; 
var customerData = [ 
{"passport_number": "6651", "first_name": "Tal", "last_name": "Ater"}, 
{"passport_number": "7727", "first_name": "Archie", "last_ name": "Stevens"} 
J; 
var customerTransaction = db.transaction("customers", "readwrite"); 
customerTransaction.onerror = function(event) { 
console.log("Error: ", event.target.error); 
}; 
var customerStore = customerTransaction.objectStore("customers"); 
for (var i = 0; i < customerData.Length; i++) { 
customerStore.add(customerData[i]); 














这 段 代 码 创建 了 一 个 新 的 readwrite 读 写 事务 ， 并 将 其 作用 域 设置 为 customers 对 象 存储 。 
它 还 监听 了 事务 的 错误 事件 ， 并 将 其 打印 到 控制 台中 。 随 后 它 使 用 了 事务 的 objectstore() 
方法 ， 打 开 customers 对 象 存储 ， 并 继续 使 用 该 对 象 存储 的 add( ) 方法 往 里 添加 两 条 记录 。 





在 浏 

















启动 事务 


如 前 所 述 ， 在 IndexedDB 中 进行 的 大 部 分 操作 都 是 事务 型 的 。 在 添加 数据 到 
对 象 存储 之 前 ， 我 们 需要 启动 一 个 新 的 事务 。 


事务 可 以 通过 在 数据 库 对 象 上 调用 transaction() 方法 启动 ， 事 务 的 作用 域 
作为 传 入 的 第 一 个 参数 。transaction() 方法 还 接受 一 个 可 选 的 第 二 参数 ， 
这 个 参数 可 以 控制 事务 是 readonly (只 读 事 务 ， 默认 值 ) 还 是 readwrite 
( 读 写 事务 )。 如 果 要 在 该 事务 期 间 添 加 、 删 除 或 者 修改 对 象 存储 中 的 数据 ， 
则 需要 打开 一 个 readwrite 事务 。 

事务 的 作用 域 可 以 是 字符 串 ， 或 者 包含 对 象 存储 的 字符 串 数 组 。IndexedDB 
通过 定义 事务 的 作用 域 ， 避 免 了 不 同事 务 之 间 的 竞争 条 件 (例如 ， 两 个 或 多 
个 事务 试图 在 同一 时 间 修 改 同 一 对 象 存 储 )。 如 果 创 建 了 两 个 或 多 个 具有 重 
县 作用 域 的 readwrite 事务 ， 它 们 将 会 进入 队列 ， 串 行 运行 。 如 果 它 们 的 f 
用 域 不 同 ， 或 者 是 readonly 事务 ， 则 它们 可 以 并 行 运行 。 
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览 器 控制 台中 运行 一 次 上 述 示例 代码 之 后 ， 我 们 将 尝试 再 次 运行 ， 但 在 此 之 前 ， 我 们 








先 要 做 出 一 点 修改 。 修 改 上 述 示例 中 的 代码 ， 将 第 二 个 用 户 (Archie) 的 passport_number 
属性 修改 成 一 个 不 同 的 值 。 现 在 尝试 再 次 在 控制 台中 运行 新 的 代码 。 


你 应 该 会 看 到 两 条 错误 消息 : 
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Error: DOMException: Key already exists in the object store， 
Error: DOMException: The transaction was aborted, so the request cannot be fulfilled. 





> 





这 两 处 错误 阐明 了 IndexedDB 的 两 个 核心 概念 。 


一 处 错误 抛 出 是 因为 我 们 设置 了 customers 对 象 存 储 是 使 用 passport_number 值 作为 键 
的 。 这 意味 着 passport_number 值 必 须 是 唯一 的 。 当 我 们 尝试 添加 一 条 与 现 有 记录 ID 相同 
的 新 记录 时 ，IndexedDB 就 会 抛 出 这 个 错误 。 


第 二 处 错误 清楚 地 表明 了 IndexedDB 的 事务 性 质 。 尽 管 第 二 个 对 象 的 唯一 ID 是 有 效 的 ， 
但 是 它 依然 没有 添加 到 数据 库 中 ， 因 为 先前 的 操作 失败 了 。 事 务 保证 了 要 么 所 有 操作 成 
功 ， 要 么 不 进行 任何 操作 。 


6.2.4 从 对 象 存储 中 读 取 数据 
现在 我 们 在 对 象 存 储 中 拥有 了 前 两 个 客户 ， 让 我 们 来 学 习 如 何 从 中 检索 对 象 。 


读 取 数 据 有 三 种 方法 。 你 可 以 使 用 键 名 来 检索 单个 对 象 ， 可 以 使 用 游标 来 遍历 存储 中 的 所 
有 对 象 ， 也 可 以 使 用 索引 来 检索 数据 的 较 小 子 集 〈 然 后 使 用 游标 来 遍历 )。 


我 们 首先 使 用 键 名 来 从 对 象 存储 中 读 取 单个 对 象 。 
在 浏览 器 控制 台中 运行 下 列 代码 : 


var request = window.indexedDB.open("my-database", 2); 
























































request.onsuccess = function(event) { 
var db = event.target.result; 
var customerTransaction = db.transaction("customers"); 
var customerStore = customerTransaction.objectStore("customers"); 
var request = customerStore.get("7727"); 
request.onsuccess = function(event) { 
var customer = event.target.result; 
console.log("First name: ", customer.first name); 
console.log("Last name: ", customer.last_name); 
}; 
}; 








假设 你 运行 过 前 面 列 出 的 代码 ， 往 customers 对 象 存储 中 添加 了 几 个 客户 ， 这 段 代码 应 该 
能 够 通过 匹配 护照 编号 ， 检 索 出 特定 的 用 户 ， 并 将 其 姓名 打印 到 控制 台中 。 


和 大 部 分 的 mdexedDB 操作 类 似 ， 我 们 首先 要 打开 数据 库 ， 并 创建 一 个 新 的 事务 。 和 以 前 一 
样 ， 我 们 将 事务 的 作用 域 限制 在 customers 对 象 存储 ， 但 这 一 次 我 们 不 需要 传递 readwrite 
标记 了 。 因 为 我 们 无 意 在 事务 中 写 入 任何 内 容 ， 所 以 使 用 readonty 事务 就 足够 了 。 


随后 我 们 在 对 象 存储 上 调用 了 get() 方法 ， 传 人 一 个 键 名 (护照 编号 ) ， 这 个 键 名 会 和 想 
要 查找 的 客户 对 象 相 匹 配 。 由 于 get() 是 一 个 异步 操作 ， 它 不 会 马上 返回 结果 ， 而 是 返回 
一 个 代表 了 请 求 的 对 象 。 通 过 监听 这 个 请 求 的 onsuccess 事件 ， 我 们 就 可 以 等 待 请 求 完 成 ， 
并 返回 所 请 求 的 对 象 。 
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你 可 以 互相 串联 大 部 分 的 mdexedDB 方法 ， 以 创建 出 更 短 、 更 简洁 的 代码 。 
如 果 你 在 随后 不 需要 引用 transaction、objectStore、get 等 方法 创建 的 特定 
对 象 ， 这 种 解决 方案 会 非常 不 错 。 
通过 互相 串联 方法 ， 上 述 示例 代码 中 的 request.onsuccess 可 以 精简 为 : 
request.onsuccess = function(event) { 
event .target.resuLt 
.transaction("customers") 
.objectStore("customers") 
.get("7727") 
.ONsuccess = function(event) { 
var customer = event.target.result; 
console.log("First name: ", customer.first name); 
console.log("Last name: ", customer.last_name); 


牧 
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6.2.5 IndexedDB 版 本 管理 


目前 为 止 ， 我 们 的 数据 库 只 有 两 个 版 本 。 初 始 版 本 是 空 的 ， 没 有 包含 对 象 存储 ， 而 第 二 个 
版 本 添加 了 一 个 对 象 存储 。 


如 果 你 将 数据 库 版 本 升级 为 3， 并 刷新 页 面 ， 会 发 生 什 么 呢 ? 你 将 会 收 到 以 下 错误 提示 : 


Failed to execute 'createObjectStore' on 'IDBDatabase ' : 
An object store with the specified name already exists. 


上 我 们 来 试图 了 解 发 生 了 什么 。 当 你 第 一 次 加 载 页面 时 ， 代 码 会 创建 数据 库 并 提供 版 本 号 
， 随 后 尝试 运行 onupgradeneeded 方法 。 这 时 候 ， 我 们 还 没有 定义 这 个 方法 ,创建 的 数据 
库 是 空 的 。 随 后 ， 我 们 添加 了 onupgradeneeded 方法 ， 这 个 方法 创建 名 为 customers 的 数据 
存储 ， 并 将 版 本 号 修改 为 2。 当 我 们 刷新 页 面 时 ， 数 据 库 注意 到 版 本 号 大 于 当前 版 本 ， 并 
运行 onupgradeneeded 方法 ， 创 建 名 为 customers 的 数据 存储 。 最 后 ， 我 们 将 版 本 号 更 新 为 
3。 当 我 们 刷新 页 面 时 ， 数 据 库 再 一 次 注意 到 版 本 号 变化 ， 并 再 一 次 运行 onupgradeneeded 
方法 。 然 而 ， 这 次 试图 创建 的 对 象 存储 已 经 存在 ， 就 会 导致 错误 。 我 们 的 数据 库 会 停留 在 
版 本 2， 因为 onupgradeneeded 事件 失败 了 。 


不 幸 的 是 ， 由 于 版 本 3 依赖 这 个 数据 存储 ， 我 们 不 能 简单 地 从 onupgradeneeded 方法 中 删 
除 这 段 代 码 。 如 果 我 们 这 样 做 了 ， 那 些 自从 版 本 1 后 没有 访问 网 站 的 用 户 (或 者 是 首次 访 
问 的 用 户 ) 就 不 会 拥有 这 个 对 象 存储 。 我 们 需要 一 种 依赖 当前 状态 ， 有 条 件 地 改变 数据 库 
的 方法 。 

解决 这 个 挑战 的 一 种 方式 来 源 于 传统 的 数据 库 世界 一 一 迁移 (migration)。 迁 移 由 一 系列 的 
原子 步骤 组 成 ， 每 个 步骤 都 可 以 将 数据 库 向 前 移动 一 个 版 本 。 


下 面 是 实现 IndexedDB 迁移 的 一 种 可 能 方案 : 


request.onupgradeneeded = function(event) { 
var db = event.target.result; 
var oldVersion = event.oldVersion; 
if (oldVersion < 2) { 
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db.createObjectStore("customers", 
{ keyPath: "passport_number" } 
); 


if (oldVersion < 3) { 
db.createObjectStore("employees", 
{ keyPath: "employee id" } 
); 
} 

}; 
通过 检查 数据 库 先 前 的 版 本 号 ， 这 个 方法 可 以 将 数据 库 从 任意 版 本 逐步 带 到 最 新 的 版 本 。 
如 果 用 户 首次 访问 站 点 (oldVersion == 0)， 两 个 迁移 都 会 运行 。 如 果 用 户 没 有 访问 过 网 
站 的 上 一 个 版 本 (oldVersion == 2)， 只 有 第 二 个 迁移 会 运行 。 
虽然 这 种 方式 确实 可 以 将 数据 库 从 版 本 1 逐步 精确 地 重新 创建 回 到 最 新 版 本 ， 但 是 如 果 要 
维护 很 多 个 版 本 ， 这 种 方法 很 快 就 会 失控 了 。 

在 版 本 之 间 升 级 数据 库 的 另 一 种 方法 ， 是 测试 当前 数据 库 的 状态 ， 并 且 根 据 需 要 进行 修改 。 


在 indexeddb.html 中 ， 将 onupgradeneeded 方法 更 新 为 下 列 代码 ， 并 确保 脚本 的 第 一 行 被 设 
置 为 打开 数据 库 版 本 3: 
request.onupgradeneeded = function(event) { 
var db = event.target.result; 
if (!db.objectStoreNames.contains("customers")) { 
db.createObjectStore("customers", 
{ keyPath: "passport_number" } 
); 
} 

}; 


刷新 浏览 器 ， 现 在 你 的 数据 库 应 该 能 够 升级 到 版 本 3， 并 且 不 会 抛 出 错误 。 
通过 这 种 方式 ， 在 进行 修改 之 前 ， 你 总 是 需要 检查 是 否 需要 进行 修改 。 只 有 数据 存储 不 存 
在 的 时 候 ， 才 会 去 添加 它 。 只 有 当 索 引 已 经 存在 时 ， 才 会 去 删除 它 。 


管理 IndexedDB 版 本 没有 唯一 正确 的 方法 。 你 可 能 会 发 现 ， 在 不 同 项 目 中 ， 这 两 种 方法 可 
能 各 有 千秋 。 你 甚至 还 会 组 合 使 用 这 两 种 方法 〈 例 如 使 用 第 二 种 方法 来 升级 数据 库 结构 ， 
然后 使 用 迁移 将 所 有 客户 对 象 的 名 字 大 写 ， 如 果 版 本 号 在 19 之 前 )。 


6.2.6 ”使 用 游标 读 取 对 象 

我 们 已 经 看 到 了 如 何 使 用 get() 方法 从 对 象 存 储 中 检索 单个 对 象 。 不 幸 的 是 ， 这 种 方法 只 

当 检 索 单 个 对 象 ， 并 且 知 道 其 确切 的 键 名 时 ， 才 能 奏效 。 要 检索 多 个 对 象 ， 需 要 打开 游标 。 
游标 是 什么 ? 
如 果 你 熟悉 基于 SQL 的 数据 库 ， 可 以 将 打开 游标 视 为 运行 一 个 SELECT * 
FROM table 查询 。 就 像 这 个 查询 可 以 通过 WHERE 和 LIMIT 参数 加 以 修饰 那样 ， 
游标 也 可 以 通过 指定 索引 和 边界 来 修改 。 
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和 SQL 返回 的 结果 不 同 ， 游 标 不 会 包含 结果 。 它 只 是 指向 对 象 存储 中 实际 对 
象 的 指针 列表 。 在 任何 时 候 ， 游 标 只 会 指向 对 象 存储 中 的 一 条 记录 ， 当 你 告 
诉 它 进行 continue() 或 者 advance() 操作 时 ， 可 以 将 其 向 后 或 者 向 前 移动 。 
这 使 得 我 们 可 以 在 大 型 对 象 存储 中 进行 迭代 〈 或 者 遍历 ) ， 而 不 需要 将 所 有 
对 象 存储 在 内 存 中 ( 见 图 6-1) 。 






































passport_number: 6651933 passport_number: 7727312 passport_number: 8729331 
first_name: Tal first_name: Archie first_name: Russel 
last_name: Ater last_name: Stevens last_name: Andreas 


| | 


# @ O O 
图 6-1: 指向 对 象 〈 但 不 包含 对 象 ) 的 游标 
让 我 们 来 打开 第 一 个 游标 。 在 浏览 器 控制 台中 运行 下 列 代码 : 


var request = window.indexedDB.open("my-database", 3); 

















request.onsuccess = function(event) { 
var db = event.target.result; 
var customerTransaction = db.transaction("customers"); 
var customerStore = customerTransaction.objectStore("customers"); 
var CuUstomerCursor = customerStore.openCursor(); 
customerCursor .onsuccess = function(event) { 
var cursor = event.target.result; 
if (!cursor) { return; } 
console.log(cursor .value.first_ name); 
cursor .continue(); 
}; 
}; 
假设 你 已 经 运行 过 前 面 示例 中 列 出 的 代码 ， 添 加 了 几 条 客户 数据 到 customers 数据 存储 中 ， 
那么 这 段 代 码 会 迭代 所 有 客户 ， 并 将 客户 的 名 字 打 印 到 控制 台 。 


前 面 几 行 代码 对 你 来 说 应 该 很 熟悉 了 。 我 们 打开 数据 库 ， 局 动 一 个 新 的 事务 ， 并 打开 了 
customers 数据 存储 。 


接 下 来 ， 我 们 继续 在 对 象 存 储 上 调用 了 openCursor() 方法 ， 这 个 异步 方法 会 打开 一 个 新 的 
游标 ， 并 且 在 每 次 游标 前 进 时 触发 onsuccess 事件 。 


在 onsuccess 函数 中 ， 我 们 可 以 访问 游标 (通过 event.target.result 可 以 找到 ) 来 检索 
当前 指向 的 对 象 。 我 们 把 对 象 的 first_name 属性 值 打印 出 来 ， 并 且 让 游标 调用 continue() 
指向 下 一 个 对 象 。 每 当 游标 改变 时 ， 会 触发 另 一 个 onsuccess 事件 ， 它 将 再 次 运行 我 们 的 
国 数 ， 并 打印 下 一 个 客户 的 名 字 ， 以 此 类 推 。 


需要 重点 记忆 的 是 ， 每 次 游标 前 进 都 会 触发 onsuccess 事件 ， 甚 至 在 穿 过 最 后 一 条 记录 或 
者 对 象 存 储 为 空 时 也 是 如 此 。 此 时 ， 游 标 (event.target .resutt) 会 指向 nutl。 因 此 , 在 
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onsuccess 方法 试图 访问 对 象 之 前 ， 需 要 先 检 查 游标 是 否 指向 对 象 。 在 上 述 例 子 中 ， 我 们 
使 用 了 条 件 if (!cursor) { return; } 来 实现 这 一 点 。 


6.2.7 ”创建 索引 


目前 为 止 ， 我们 只 学 习 了 如 何在 对 象 存储 中 打开 游标 并 遍历 每 个 对 象 。 如 果 你 只 想 检 索 符 
合 某 个 标准 的 对 象 ， 那 么 迭代 整个 对 象 存储 就 不 是 非常 有 效 或 者 方便 了 。 通 过 使 用 索引 ， 
我 们 可 以 对 数据 存储 进行 “查询 "， 打 开 一 个 只 会 迭代 匹配 该 查询 的 对 象 的 游标 。 
要 实现 这 一 点 ， 我 们 先 来 创建 第 二 个 对 象 存储 ， 用 来 保存 不 同 货币 间 的 汇率 。 我 们 在 其 中 
存储 的 每 个 汇率 对 象 看 起 来 是 这 样 的 : 

{"exchange_from": "CAD", "exchange_to": "USD", "rate": 0.77} 


现在 ,我 们 想 要 检索 某 种 货币 的 所 有 汇率 。 解 决 这 个 问题 的 其 中 一 种 方法 ， 是 检索 对 象 存 
储 中 的 每 个 对 象 并 逐一 欠 代 ， 检 查 每 个 对 象 是 否 匹配 我 们 想 要 寻找 的 货币 。 而 一 种 更 好 、 
更 快 的 方法 是 使 用 索引 。 


在 indexeddb.html 中 ， 将 数据 库 版 本 修改 成 4， 并 将 onupgradeneeded 方法 替换 成 下 列 代 码 : 


request.onupgradeneeded = function(event) { 
var db = event.target.result; 
if (!db.objectStoreNames.contains("customers")) { 
db.createObjectStore("customers", 
{ keyPath: "passport_number" } 
); 






































if (!db.objectStoreNames.contains("exchange_rates")) { 
var exchangeStore = db.createObjectStore("exchange_rates", 
{ autoIncrement: true } 
); 
exchangeStore.createIndex("from idx", "exchange_from", { unique: false }); 
exchangeStore.createIndex("to_idx", "exchange_to", {unique: false}); 


exchangeStore.transaction.oncomplete = function(event) { 
var exchangeRates = [ 
{"exchange_from": "CAD", "exchange_to": "USD", "rate": 0.77}, 
{"exchange_from": "JPY", "exchange_to": "USD", "rate": 0.009}, 
{"exchange_from": "USD", "exchange_ to": "CAD", "rate": 1.29}, 
{"exchange_from": "CAD", "exchange_to": "JPY", "rate": 81.60}, 
J; 
var exchangeStore = db 
.transaction("exchange_rates", "readwrite") 
.objectStore("exchange_rates"); 
for (var i = 0; i < exchangeRates.Length; i++) { 
exchangeStore.add(exchangeRates[i]); 
} 
下 
} 
}; 


我 们 新 的 onupgradeneeded 方法 首先 确保 不 会 再 为 已 经 拥有 customers 对 象 存储 的 用 户 重新 创 
建 。 同 理 ， 我 们 接 下 来 也 会 检测 exchange_rates 是 否 存在 ， 并 且 在 不 存在 时 才 会 去 创建 它 。 














84 | 第 6 章 


inline key 与 out-of-line key 

我 们 使 用 自 增 键 创 建 了 exchange_rates 存储 。 和 customers 对 象 存 储 相 比 ， 
exchange_rates 没有 像 护 照 编号 这 样 的 自然 唯一 标识 符 。 通 过 设置 autoIncrement 
为 true， 我 们 就 可 以 告诉 IndexedDB， 让 其 为 每 一 个 对 象 创建 唯一 的 索引 。 
第 一 个 存储 的 对 象 会 得 到 ID 1， 第 二 个 会 得 到 ID 2， 以 此 类 推 。 

这 种 键 通常 称 为 out-of-line key， 因 为 键 和 值 的 存储 是 分 离 的 。 

使 用 keyPath 指向 对 象 自身 属性 的 键 称 为 inline key。customers 对 象 的 存储 
就 使 用 了 inline key。 


我 们 的 代码 在 新 的 对 象 存储 中 创建 了 两 个 索引 。 这 些 索 引 允 许 我 们 打开 特定 的 游标 ， 只 迫 
人 例如 ， 通 过 使 用 from_idx 索引 ， 我 们 可 以 检索 所 有 从 美元 到 其 他 
货币 的 汇率 。 
createIndex() 方法 接收 一 个 索引 名 作为 第 一 个 参数 ， 后 面 是 这 个 索引 需要 使 用 的 键 ( 例 
如 exchange_to)， 以 及 一 个 可 选 的 选项 数组 。 在 我 们 的 例子 中 ， 我 们 使 用 了 选项 数组 ， 来 
指定 我 们 用 于 这 个 索引 的 键 不 是 唯一 的 ( 即 每 种 货币 可 以 用 不 同 的 汇率 转换 成 其 他 货币 )。 
在 onupgradeneeded 方 法 的 结尾 ， 我 们 给 exchange_rates 对 象 存储 填 入 了 一 些 初始 数 
os 
个 添加 操作 (例如 从 服务 器 请 求 更 多 的 最 新 汇率 之 后 )。 请 注意 ， 我 们 要 确保 只 

te be hme 才 去 添加 数据 。 这 样 ， 就 可 以 确保 在 尝试 向 
对 象 添加 数据 之 前 ， 成 功 创建 对 象 存储 。 


6.2.8 ”使 用 索引 读 取 数据 
索引 允许 我 们 打开 特定 的 游标 ， 只 对 符合 菜 个 标准 的 结果 进行 办 代 。 
在 控制 台 运 行 下 列 代码 ， 可 以 打印 出 加 拿 大 元 兑换 所 有 其 他 货币 的 汇率 ; 


var request = window.indexedDB.open("my-database", 4); 

































































request.onsuccess = function(event) { 
var db = event.target.result; 
var exchangeTransaction = db.transaction("exchange_rates"); 
var exchangeStore = exchangeTransaction.objectStore("exchange_rates"); 
var exchangeIndex = exchangeStore.index("from idx"); 
var exchangeCursor = exchangeIndex.openCursor("CAD"); 
exchangeCursor .onsuccess = function(event) { 
var cursor = event.target.result; 
if (!cursor) { return; } 
var rate = cursor.value; 
console.log(rate.exchange_from+" to "+rate.exchange to+": "+rate.rate); 
cursor .continue(); 
}; 
}; 


在 打开 数据 库 之 后 ， 代 码 启动 事务 ， a 之 前 ， 我 们 通过 
打开 对 象 存储 自身 的 游标 来 迭代 整个 对 象 存储 。 这 一 次 不 同 ， 我 们 首先 要 从 对 象 存储 中 获 
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取 索 引 ， 随 后 在 索引 对 象 上 打开 游标 。 我 们 通过 在 对 象 存储 上 调用 index() 方法 ， 并 传人 
想 要 使 用 的 索引 名 称 来 实现 这 一 点 。 随 后 ， 我 们 可 以 在 索引 上 调用 openCursor() 方法 ， 传 
入 想 要 寻找 的 值 (在 这 个 例子 中 ， 我 们 想 要 通过 货币 的 名 字 获 取 对 应 的 汇率 )。 


随后 ， 我 们 可 以 通过 监听 success 事件 来 迭代 游标 ， 这 和 遍历 对 象 存 储 的 游标 是 类 似 的 。 
唯一 的 区 别 是 ， 前 者 只 会 迭代 符合 给 定 标 准 的 对 象 (例如 ，exchange_fron 的 值 为 CAD ) 。 


6.2.9 限制 游标 的 范围 

默认 情况 下 ， 游 标 会 迭代 对 象 存储 中 的 所 有 对 象 ， 或 者 索引 返回 的 所 有 对 象 。 你 可 以 通过 
传递 一 个 IDBKeyRange 对 象 ， 进 一 步 限 制 游标 运 代 的 对 象 范围 。 

上 例 中 的 openCursor 命令 可 以 重 写 为 显 式 使 用 IDBKeyRange。 下 面 的 示例 中 展示 了 两 种 方 
法 ， 它 们 返回 的 结果 完全 一 致 。 传 递 IDBKeyRange.only("CAD") 给 游标 ， 相 当 于 让 其 只 返回 
匹配 CAD 索引 值 的 对 象 ; 


exchangeIndex.openCursor("CAD"); 
exchangeIndex.openCursor(IDBKeyRange.only("CAD")); 






































除了 only 之 外 ，IDBKeyRange 还 支持 LowerBound()、upperBound() 和 bound() 方法。 这 些 
方法 允许 我 们 将 结果 限制 在 一 定 范 围 内 。 


和 onty() 方法 类 似 ，LowerBound() 和 upperBound() 接收 一 个 值 作为 第 一 个 参数 。 这 个 值 
会 作为 范围 的 下 界 或 者 上 界 。 此 外 ， 它 们 还 可 以 接收 一 个 布尔 值 作为 第 二 个 参数 ， 这 个 参 
数 决定 了 结果 应 该 排除 (true) 还 是 包含 (false) 那些 等 于 范围 边界 值 的 对 象 : 

// 包含 了 所 有 CAD 之 上 的 键 ， 包 括 CAD 本 身 

// 例如 : CAD、USD 

IDBKeyRange. LowerBound("CAD", false); 

// 包含 了 所 有 CAD 之 下 的 键 ， 不 包括 CAD 本 身 

// 例如 : AUD、BRL 

IDBKeyRange.upperBound("CAD", true); 


可 以 将 lowerBound() 和 upperBound() 组 合成 一 条 单独 的 命令 bound()，bound() 同时 接收 
下 界 和 上 界 作为 第 一 个 和 第 二 个 参数 ， 布 尔 值 作为 第 三 个 和 第 四 个 参数 ， 分 别 对 应 是 否 排 
除 那 些 等 于 下 界 或 者 上 界 的 结果 。 
下 面 的 代码 将 返回 以 字母 C 开头 的 所 有 记录 的 游标 ( 即 C 和 0 之 间 ， 包 括 C 本 身 ， 但 不 包 
括 以 D 开始 的 记录 ) : 

exchangeIndex.openCursor( 


IDBKeyRange.bound("C", "D", false, true); 
); 


你 可 以 使 用 IDBKeyRange 来 限制 索引 或 者 对 象 存储 上 打开 的 游标 返回 的 结果 数 。 下 面 这 个 
在 对 象 存储 上 直接 打开 的 游标 ， 会 返回 所 有 符合 键 大 于 等 于 3 的 记录 : 


exchangeStore.openCursor( 
IDBKeyRange. LowerBound(3, false); 
); 
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6.2.10 “设置 游标 方向 
默认 情况 下 ， 游 标 将 按照 键 (对 象 存储 的 主键 ,或 者 索引 键 ) 的 升序 方向 迭代 对 象 。 你 可 以 
通过 在 打开 游标 时 传递 prev 作为 第 二 个 参数 ， 以 相反 的 顺序 迭代 对 象 (按照 键 的 降序 排序 )。 


下 列 代码 遍历 了 对 象 存储 中 的 所 有 对 象 ， 按 照 键 的 降序 排序 : 
var request = window.indexedDB.open("my-database", 4); 


request.onsuccess = function(event) { 
var db = event.target.result; 
var exchangeTransaction = db.transaction("exchange_rates"); 
var exchangeStore = exchangeTransaction.objectStore("exchange_rates"); 
var exchangeCursor = exchangeStore.openCursor(null, "prev'"); 
exchangeCursor .onsuccess = function(event) { 
var cursor = event.target.result; 
if (!cursor) { return; } 
var rate = cursor.value; 
console.log(rate.exchange_ from+" to "+rate.exchange to+": "+rate.rate); 
cursor .continue(); 
}; 
}; 


你 会 注意 到 ， 这 次 我 们 是 在 对 象 存储 而 不 是 索引 上 打开 了 游标 ， 并 且 传 递 的 第 一 个 参数 是 
null 而 不 是 IDBKeyRange 对 象 ， 因 为 我 们 希望 遍历 对 象 存储 中 的 所 有 对 象 。 


在 对 象 存储 和 索引 上 打开 的 游标 ， 都 可 以 接收 以 下 参数 : 只 有 范围 、 只 有 方向 、 范 围 加 上 
方向 ， 或 者 两 者 都 不 传 。 
6.2.11 更 新 对 象 存储 中 的 对 象 


当 你 知道 一 个 对 象 的 主键 时 ， 可 以 通过 在 对 象 存 储 中 调用 put() 方法 ， 传 人 要 更 新 的 对 象 
和 对 象 的 主键 ， 来 快速 更 新 它 : 


var request = window.indexedDB.open("my-database", 4); 





















































request.onsuccess = function(event) { 
var UpdatedRate = 
{"exchange_from": "CAD" ，"exchange_to": "ILS", "rate": 1.2}; 
var db = event.target.result; 
var exchangeTransaction = db.transaction("exchange_rates", "readwrite"); 
var exchangeStore = exchangeTransaction.objectStore("exchange_rates"); 
var request = exchangeStore.put(updatedRate, 2); 
request.onsuccess = function(event) { 
console.log("Updated"); 


}; 
我 们 首先 打开 了 一 个 readwrite 事务 ， 并 获取 了 exchange_rates 对 象 存储 。 随 后 ， 在 对 象 
存储 上 调用 了 put() 方法 ， 传 和 人 要 更 新 的 对 象 ， 以 及 想 要 替换 的 对 象 键 名 。 
请 注意 ， 这 只 适用 于 使 用 out-of-line key 的 对 象 存储 (参见 6.2.7 节 中 的 “inline key 与 out- 
of-line key”) ， 例 如 我 们 的 exchange_rates 对 象 存储 (和 customers 对 象 存储 相对 ， 后 者 使 
用 了 keypath， 指 向 了 客户 的 护照 编号 ) 。 
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当 我 们 想 在 使 用 inline key 的 对 象 存 储 中 更 新 对 象 ， 或 者 不 知道 对 象 的 键 名 时 ， 必 须 首 先 
从 对 象 存 储 中 检索 该 对 象 。 随 后 ， 可 以 通过 在 对 象 存 储 中 调用 put()， 或 者 在 游标 上 调用 
update()， 来 修改 并 更 新 数据 存储 。 


下 面 的 代码 展示 了 这 两 种 方法 : 


var request = window.indexedDB.open("my-database", 4); 




















request.onsuccess = function(event) { 
var db = event.target.result; 
var customerTransaction = db.transaction("customers", "readwrite"); 
var customerStore = customerTransaction.objectStore("customers"); 
var customerCursor = customerStore.openCursor(); 
customerCursor .onsuccess = function(event) { 
var cursor = event.target.result; 
if (!cursor) { return; } 
var customer = cursor.value; 
if (customer.first name === "Archie") { 
customer .first name = "Archer"; 
cursor .update(customer); 


} else { 
customer .first_ name = "Tom"; 
customerStore.put(customer); 
} 
cursor .continue(); 
}; 


}; 


这 段 代 码 打 开 了 一 个 遍历 所 有 客户 的 游标 ， 随 后 逐一 检查 了 每 个 对 象 的 名 称 。 如 果 客 户 名 
是 Archie， 我 们 就 使 用 游标 的 update() 方法 将 其 修改 为 Archer。 否 则 ， 就 使 用 对 象 存储 
的 put() 方法 将 其 修改 为 Tom。 


注意 ， 这 次 使 用 put() 或 者 update() 时 ， 不 需要 指定 每 个 对 象 的 主键 ， 因 为 我 们 传递 的 是 
原始 对 象 (技术 上 来 看 ， 这 是 一 份 带 有 修改 的 克隆 副本 )， 其 中 已 经 包含 了 它 的 键 名 。 


6.2.12 ”从 对 象 存 储 删除 对 象 
从 对 象 存 储 删 除 对 象 的 方式 和 修改 对 象 十 分 相似 。 
下 列 代码 会 从 exchange_rates 对 象 存 储 中 删除 键 名 为 2 的 对 象 : 


var request = window.indexedDB.open("my-database", 4); 





























request.onsuccess = function(event) { 
var db = event.target.result; 
db.transaction("exchange_rates", "readwrite") 
.objectStore("exchange_rates") 
.delete(2); 
}; 


如 你 所 见 ， 当 你 知道 对 象 的 键 名 ， 并 且 对 象 存储 使 用 的 是 out-of-line key 的 时 候 ， 可 以 简 
单 地 在 对 象 存储 上 调用 delete() 方法 ， 传 人 对 象 的 键 名 即 可 删除 。 
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在 所 有 其 他 情况 下 ， 你 可 以 使 用 游标 来 迄 代 对 和 象 ， 并 简单 地 在 游标 本 身上 调用 delete() 方 
法 。 这 样 将 会 删除 游标 当前 指向 的 对 象 。 


下 面 的 代码 将 会 遍历 所 有 客户 ， 并 删除 姓氏 为 Stevens 的 客户 : 


var request = window.indexedDB.open("my-database", 4); 























可 














request.onsuccess = function(event) { 
var db = event.target.result; 
db.transaction("customers", "readwrite") 
.objectStore("customers") 
.openCursor() 
.ONsuccess = function(event) { 
var cursor = event.target.result; 
if (!cursor) { return; } 
var Customer = cursor.value; 
if (customer.last name === "Stevens") { 
cursor .deLete(); 
} 
cursor .continue(); 
}; 
}; 


6.2.13 ”从 对 象 存储 中 删除 所 有 对 和 象 


你 可 以 通过 在 对 象 存储 上 调用 clear()， 来 删除 其 中 的 所 有 对 象 。 


和 其 他 大 多 数 IndexedDB 操作 类 似 ，clear() 会 返回 一 个 请 求 ， 支 持 success 和 error 事 
件 。 下 列 代码 会 清空 customers 对 象 存 储 ， 并 在 完成 清空 后 ， 马 上 在 控制 台中 打印 信息 : 


var request = window.indexedDB.open("my-database", 4); 





request.onsuccess = function(event) { 
var db = event.target.result; 
db.transaction("customers", "readwrite") 
.objectStore("customers") 
.clear() 
.ONsuccess = function(event) { 
ConsoLe.Log("0bject store cleared"); 
}; 
}; 


6.2.14 处理 冒 泡 IndexedDB 错 误 


在 IndexedDB 中 ， 错 误 事 件 会 冒 泡 。 

如 果 打 开 游 标的 请 求 抛 出 了 错误 ， 错 误会 被 请 求 的 onerror 处 理 器 捕获 。 但 是 ， 如 果 我 们 
没有 在 那个 请 求 上 定义 错误 处 理 器 ， 错 误 就 会 冒 泡 ， 被 事务 的 错误 处 理 器 捕获 。 如 果 事 务 
也 没有 定义 错误 处 理 器 ， 那 么 错误 就 会 再 次 冒 泡 ， 被 数据 库 对 象 的 错误 处 理 器 所 捕获 。 

这 种 行为 可 以 让 你 避免 在 每 个 请 求 或 者 事务 上 编写 错误 处 理 器 。 相 反 ， 你 可 以 在 数据 库 对 
象 上 编写 一 个 错误 处 理 器 。 
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6.3 SQL 忍者 的 IndexedDB 


作为 熟悉 SQL 的 读者 ， 我 发 现 可 以 将 IndexedDB 的 一 些 概念 和 熟悉 的 SQL 概念 进行 比较 ， 
以 便于 掌握 和 记忆 。 
小 心 行事 。 大 部 分 比较 在 最 抽象 的 层面 上 是 有 意义 的 ， 但 是 当 你 仔细 研究 就 会 发 现 问 题 。 它 们 
就 像 那些 给 PHP 开发 者 的 JavaScript 指南 一 样 “ 正 确 ” 且 实用 这 是 一 种 糟糕 的 学 习 方 式 ， 
但 有 时 候 ， 你 只 是 需要 一 个 快速 提醒 ， 到 底 如 何 检查 一 个 变量 是 empty() 还 是 is_numeric()。 
如 果 你 有 SQL 背景 ， 不 妨 使 用 以 下 “备忘录 "”。 
游标 
打开 游标 和 运行 SELECT * FROM table; 有 点 类 似 ， 它 允许 你 获取 整个 对 象 ， 并 对 结果 进 
行 运 代 。 与 SQL 不 同 的 是 ， 游 标 只 会 指向 对 象 ， 实 际 上 没有 返回 对 象 (参见 6.2.6 节 中 
的 “游标 是 什么 ?” ”获取 更 多 细节 )。 
IDBKeyRange 
IDBKeyRange 对 于 游标 的 作用 ， 相 当 于 WHERE 对 于 SELECT 的 作用 。 就 像 WHERE x = y 
可 以 让 你 将 结果 限制 为 只 匹配 y 那样 ，IDBKeyRange.only(y) 也 可 以 让 游标 只 友 代 对 应 
的 结果 。 类 似 地 ，WHERE x >= y 也 可 以 表达 为 IDBKeyRange.LowerBound(y，faLse) 。 
在 SQL 中 WHERE 可 以 查询 任何 列 ， 而 IndexedDB 只 允许 你 查询 对 象 存 储 的 索引 ， 或 者 
对 象 的 键 。 
索引 
在 SQL 中 ， 索 引 可 用 来 根据 不 同 的 列 对 数据 库 进 行 预 索引 ， 这 样 通过 列 的 值 进行 表 查 
询 就 可 以 更 快 地 完成 。IndexedDB 中 的 索引 是 一 种 更 简化 的 形式 ， 维 护 对 象 存 储 的 索 
引 ， 可 以 根据 存储 在 其 中 的 对 象 的 单个 属性 来 进行 查询 。 
与 SQL 中 可 以 对 表格 的 任何 一 列 进行 查询 (无 论 素 引 与 否 ) 不 同 ，IndexedDB 只 允许 
你 使 用 已 经 索引 的 属性 来 限制 游标 。 
游标 方向 
类 似 于 SQL 的 ORDER BY x DESC， 在 打开 游标 时 ， 可 以 通过 传递 prev， 反 转 读 取 对 象 的 
顺序 。 和 SQL 不 同 的 是 ， 只 能 根据 对 象 存储 的 键 或 者 索引 的 键 来 排序 (依赖 于 你 在 哪 
个 对 象 上 打开 游标 )。 


《华盛顿 邮 报 》 一 一 利用 IndexedDB 的 离线 分 析 

在 构建 新 的 渐进 式 Web 应 用 时 , 《华盛顿 邮 报 》 的 团队 面临 着 一 个 有 趣 的 挑 
战 。 在 添加 离线 支持 时 ， 他 们 虽然 提升 了 访问 者 的 体验 ， 却 失去 了 测量 和 跟 
踪 这 些 体验 的 能 力 。 作 为 一 个 数据 驱动 的 团队 ， 这 并 不 是 他 们 愿意 牺牲 的 。 
直接 与 谷歌 开发 者 关系 小 组 的 Jeff Posnick 合作 时 ， 他 们 提出 了 一 种 解决 方 
案 : 当 fetch 监听 器 捕获 到 失败 的 谷歌 分 析 请 求 时 ， 将 其 存储 到 IndexedDB 
中 。 随 后 ， 下 一 次 fetch 捕获 到 成 功 的 谷歌 分 析 请 求 时 (意味 着 连接 已 经 恢 
复 )，service worker 将 重 试 所 有 失败 的 分 析 请 求 。 















































谷歌 团队 已 经 以 辅助 库 的 形式 发 布 了 这 份 代 码 ， 称 之 为 workbox-google- 
analytics， 你 可 以 将 它 用 在 自己 的 项 目 中 。 























6.4 _ IndexedDB 实 践 


让 我 们 将 注意 力 转 回 哥 谭 帝国 酒店 应 用 。 

这 款 应 用 跟踪 了 用 户 的 预订 ， 并 显示 在 My Account 页 面 。 目 前 ， 这 是 通过 从 服务 器 获取 
JSON 文件 形式 的 预订 数据 来 完成 的 ， 随 后 service worker 将 其 缓存 在 CacheStorage 中 。 每 当 
用 户 操作 这 些 数 据 (添加 、 修 改 或 者 删除 预订 ) 时 ， 这 份 缓存 的 SON 文件 就 会 过 时 。 只 
当 用 户 再 次 请 求 页 面 时 ， 才 会 从 网 络 接收 新 的 、 有 效 的 JSON 文件 ， 并 替换 缓存 的 版 本 。 
这 个 案例 中 ， 客 户 端 修改 了 数据 之 后 ， 会 使 得 客户 端 存储 的 数据 失效 ， 数 据 只 能 通过 网 络 
来 更 新 。 我 们 可 以 做 得 更 好 。 预 订 数 据 可 以 作为 IndexedDB 的 主要 候选 对 象 。 

在 my-account.js 文件 中 ， 包 含 了 驱动 当前 版 本 账号 页 面 的 逻辑 : 


$(document).ready(function() { 













































































// 请 求 并 泻 染 用 户 预 订 内 容 


populateReservations(); 





// 添加 预订 控件 的 功能 
$("#reservation-form").submit(function(event) { 
event.preventDefault(); 
var arrivalDate = $("#form--arrival-date").val(); 
var nights = $("#form--nights").val(); 
var guests = $("#form--guests").val(); 
var id = Date.now().toString().substring(3, 11); 
if (!arrivalDate || !nights || !guests) { 
return false; 


addReservation(id, arrivalDate, nights, guests); 
return false; 


}); 
// 定 期 检测 未 确认 的 预约 


setInterval(checkUnconfirmedReservations, 5000); 


}); 
// 向 服务 端 请 求 预订 数据 ， 并 这 染 到 页 面 


var populateReservations = function() { 
$.getJSON("/reservations.json", renderReservations); 


3 





// 遍历 未 确认 的 预订 ， 并 向 服务 端 验证 其 状态 
var checkUnconfirmedReservations = function() { 
$(".reservation-card--unconfirmed").each(function() { 
$.getJSON( 
"/reservation-details.json", 
{id: $(this).data("id")}, 
function(data) { 
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updateReservationDisplay(data); 
]); 
]); 
}; 


// 添加 一 个 等 待 状态 的 预订 到 DOM 结 构 中 ， 并 尝试 向 服务 端 发 起 预订 
var addReservation = function(id, arrivalDate, nights, guests) { 
var reservationDetails = { 


id: id, 

arrivalDate: arrivalDate, 

nights: nights, 

guests: guests， 

status: "Awaiting confirmation" 


3 
renderReservation(reservationDetails); 
$.getJSON("/make-reservation", reservationDetails, function(data) { 
updateReservationDisplay(data); 
}); 
}; 
这 段 脚本 相对 简单 ， 实 现 了 以 下 功能 。 
() 调用 populateReservations()， 它 从 服务 器 加 载 reservations.json， 逐 一 遍历 结果 ， 并 将 
结果 添加 到 DOM 中 (使 用 renderReservations 国 数 )。 
(2) 向 预订 按钮 添加 验证 表单 数据 的 逻辑 ， 然 后 浑 染 新 的 预订 内 容 到 DOM 中 ， 并 向 服务 器 
发 送 新 的 预订 。 
(3) 每 五 秒 调 用 一 次 checkUnconfirmedReservations 图 数 ， 检 查 未 确认 的 预订 ， 并 通过 联系 
服务 器 查看 其 状态 是 否 更 新 。 
文件 的 剩余 部 分 (未 在 前 面 的 代码 中 显示 ) 包含 了 renderReservations()、renderReservation() 
和 updateReservationDisplay() 方法 的 定义 ， 这 些 方法 会 接收 预订 细节 ， 并 将 其 答 染 到 
DOM 中 。 我 们 不 会 覆盖 或 者 修改 这 部 分 内 容 。 
这 段 脚本 可 以 通过 很 多 方式 进行 改进 ， 从 它 依赖 DOM 中 的 数据 作为 真实 来 
源 、 不 断 轮 询 网 络 进 行 更 新 的 方式 ， 到 处 理 错误 (或 者 忽略 错误 ) 的 方式 。 
实际 上 ， 我 们 故意 保持 代码 简单 ， 以 便 专 注 于 本 章 的 核心 概念 。 


























我 们 将 会 分 两 个 阶段 来 升级 到 IndexedDB。 首 先 ， 修 改 代 码 ， 将 网 络 请 求 的 所 有 预订 存储 
到 本 地 数据 库 中 。 我 们 的 修改 版 populateReservations() 方法 ， 将 总 是 试图 从 数据 库 读 取 
预订 数据 ， 只 有 当 本 地 数据 不 存在 时 ， 才 回 退 到 网 络 。 其 次 ， 我 们 将 修改 添加 预订 的 代 
码 ， 以 及 修改 定期 从 网 络 获取 预订 状态 的 代码 。 这 两 者 都 会 被 修改 成 保持 本 地 数据 库 的 数 
据 最 新 ， 并 且 与 服务 端 同 步 。 


一 如 往常 ， 首 先 要 确保 你 的 代码 处 于 上 一 章 结 束 时 的 状态 。 为 此 ， 在 命令 行 中 运行 以 下 命令 : 


git reset --hard 
git checkout ch06-start 


在 项 目的 public/js 目录 中 ， 添 加 一 个 空 文件 ， 并 命名 为 reservations-store.js。 这 个 文件 将 会 
包含 我 们 的 IndexedDB 代码 。 
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接 下 来 ， 我 们 要 确保 账号 页 面 会 加 载 这 个 文件 。 在 my-account.html 接近 末尾 的 地 方 ， 











一 个 <script> 标签 ， 放 在 app.js <script> 标签 的 上 方 : 


<script src="/js/reservations-store.js"></script> 
<script src="/js/app.js"></script> 
<script src="/js/my-account.js"></script> 





添加 


为 确保 用 户 在 离线 时 也 能 访问 他 们 的 预订 ， 打 开 serviceworkerjs， 并 添加 /js/reservations- 





store.js 到 CACHED_URLS 数组 中 。 


现在 开始 编写 IndexedDB 代码 。 在 reservations-store.js 中 ， 添 加 下 列 代 码 : 


var openDatabase = function() { 


// 在 尝试 使 用 IndexedDB 之 前 ， 需 要 确保 浏览 器 支持 IndexedDB 
if (!window.indexedDB) { 
return false; 








} 
var request = window.indexedDB.open("gih-reservations", 1); 


request.onerror = function(event) { 
console.log("Database error: ", event.target.error); 


和 


request.onupgradeneeded = function(event) { 
var db = event.target.result; 
if (!db.objectStoreNames.contains("reservations")) { 
db.createObjectStore("reservations", 
{ keyPath: "id" } 
); 
} 
}; 


return request; 


}; 


var openObjectStore = function(storeName, successCallback, transactionMode) { 
var db = openDatabase(); 
if (!db) { 
return false; 
} 
db.onsuccess = function(event) { 
var db = event.target.result; 
var objectStore = db 
.transaction(storeName, transactionMode) 
.objectStore(storeName); 
successCallback(objectStore); 
}; 
return true; 


}; 


var getReservations = function(successCallback) { 
var reservations = []; 
var db = openObjectStore("reservations", function(objectStore) { 
objectStore.openCursor().onsuccess = function(event) { 
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var cursor = event.target.result; 
if (cursor) { 
reservations.push(cursor .value); 
cursor.continue(); 
} elsef 
if (reservations.length > 0) { 
successCallback(reservations); 
} else { 
$.getJSON("/reservations.json", function(reservations) { 
openObjectStore("reservations", function(reservationsStore) { 
for (var i = 0; i < reservations.length; i++) { 
reservationsStore.add(reservations[i]); 


successCallback(reservations); 
}, "readwrite"); 


3 


} 
} 
}; 
}); 
if (!db) { 
$.getJSON("/reservations.json", successCallback); 


}; 
我 们 的 新 代码 中 首先 定义 了 一 些 实 用 的 函数 来 处 理 数 据 库 。 
第 一 个 函数 openDatabase() 会 打开 一 个 新 的 数据 库 请 求 ， 设 置 基本 的 错误 日 志 ， 定 义 数据 
库 的 更 新 方法 ， 并 在 方法 中 创建 reservations 对 象 存 储 。 如 果 浏 览 器 不 支持 IndexedDB， 
它 就 会 返回 false， 否 则 就 会 返回 请 求 对 象 。 由 于 返回 的 请 求 对 象 没有 包含 onsuccess 事 
件 ， 所 以 我 们 后 续 可 以 这 样 使 用 它 : 

var db = openDatabase().onsuccess = function(event) {} 

if (!db) { console.log("IndexedDB not supported"); } 


第 二 个 函数 open0bjectStore() 会 在 对 象 存 储 上 打开 一 个 事务 ， 并 在 其 上 运行 函数 。 它 会 
接受 对 象 存储 的 名 称 作为 第 一 个 参数 ， 打 开 成 功 时 运行 的 回调 函数 作为 第 二 个 参数 ， 以 
及 一 个 可 选 的 第 三 参数 ， 其 中 包含 了 需要 打开 的 事务 类 型 一 一 readonly (默认 ) 或 者 
readwrite。 如 果 浏 览 器 支持 IndexedDB ， 国 数 会 返回 true， 否 则 返回 false。 使 用 这 个 函 
数 的 一 个 简单 示例 是 : 
var db = openObjectStore("reservations", function(objectStore) { 
objectStore.openCursor().onsuccess = function() {}; 


}, "readwrite"); 
if (!db) { console.log("IndexedDB not supported"); } 


最 后 我 们 创建 了 getReservations() 函数 。 该 函数 接收 一 个 回调 函数 ， 在 执行 回调 时 传 入 
一 个 包含 了 所 有 用 户 预 订 的 数组 。 这 些 预 订 数 据 会 从 本 地 IndexedDB 数据 库 或 者 从 服务 
端 返 回 。 函 数 首先 打开 reservations 对 象 存储 ， 创 建 游标 ， 并 对 所 有 数据 进行 迭代 ( 见 
图 6-2)。 在 探索 游标 的 时 候 (参见 6.2.6 节 )， 我 们 看 到 游标 的 onsuccess 函数 ， 在 游标 每 
次 前 进 到 一 个 新 的 记录 时 都 会 被 调用 ， 甚 至 在 游标 通过 最 后 一 条 记录 之 后 也 会 被 调用 (如 
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果 对 象 存储 为 空 ， 就 会 发 生 在 第 一 次 调用 onsuccess 回调 的 时 候 )。 基 于 这 个 原因 ， 我 们 





在 onsuccess 
将 记录 放 入 预订 数组 中 
象 存储 为 空 ， 要 么 是 因 





回调 的 一 











F 始 需要 确保 游标 是 指向 某 条 记录 的 。 如 果 这 个 判断 为 真 ， 我 们 就 
， 并 将 游标 向 前 移动 。 如 果 游 标 没有 指向 任何 内 容 (要 么 是 因为 对 
为 游标 通过 最 后 一 条 记录 ) ， 我 们 就 会 查看 预订 数组 。 如 有 果 预 订 数 








组 不 为 空 ， 此 时 我 们 就 在 数组 中 获得 了 所 有 的 预订 数据 ， 随 后 调用 successCallback， 传 


入 这 个 数组 。 如 果 在 遍 


历 对 象 存储 中 的 每 条 记录 之 后 ， 预 订 数 组 依然 为 空 ， 那 么 我 们 就 会 


通过 向 网 络 请 求 reservations.json 来 检索 它 。 当 接收 到 JSON 数据 后 ， 我 们 对 其 进行 迭 


代 ， 将 每 条 预订 添加 到 





[Ue 


见习 个 





济 


对 象 存储 中 。 一 旦 所 有 预订 数据 存储 到 IndexedDB 之 后 ， 我 们 就 调 





用 sucessCallback， 传 入 预订 数组 。 在 函数 末尾 ， 我 们 检查 了 是 否 支 持 IndexedDB。 如 果 
支持 IndexedDB ， 那 么 open0bjectStore 就 会 立即 返回 false， 从 而 触发 最 后 一 个 





条 件 ， 从 网 络 中 获取 预订 数据 作为 代替 。 























将 游标 指向 
下 


游标 是 否 
指向 预订 ? 


否 
从 JSON 
获取 预订 
在 对 象 存储 
中 保存 预订 


IndexedDB 不 可 月 





从 JSON 
获取 预订 











将 预订 添加 到 
结果 数组 





目 


能 否 找到 
任何 预订 ? 














6-2: getReservations() 逻辑 的 流程 图 
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在 Firefox 中 ， 当 用 户 禁 用 第 三 方 cookie 时 ， 尝 试 使 用 IndexedDB 会 抛 出 错 
误 。 如 果 你 想 让 代码 在 这 样 的 环境 中 运行 (例如 ， 7 | 禁用 了 第 三 方 
cookie， 而 代码 尝试 在 第 三 方 网 站 中 和 典 入 的 iframe 中 运行 )， 可 能 你 需要 使 用 
try...catch 语句 ， 将 window.indexedDB We 

















现在 ， 用 于 存储 和 访问 IndexedDB 中 预订 的 框架 已 经 到 位 ， 是 时 候 投 入 使 用 了 。 
在 my-account.js 中 ， 现 有 的 populateReservations 函数 代码 是 这 样 的 : 





var populateReservations = function() { 
$.getJSON("/reservations.json", renderReservations); 
这 个 函数 中 调用 了 $.getJSON()， 获 取 一 个 预订 对 象 的 数组 ， 并 传递 给 一 个 回调 函数 。 我 
们 可 以 设计 一 个 getReservations 函数 ， 使 其 同样 接收 并 调用 一 个 回调 函数 ， 并 传 入 一 个 
类 似 结构 的 数组 ， 从 而 使 得 这 两 个 函数 可 以 互 换 。 


将 populateReservations 国 数 替换 成 下 列 代 码 : 


var populateReservations = function() { 
getReservations(renderReservations); 


}; 
当 你 下 次 访问 页 面 时 ， 将 会 创建 一 个 IndexedDB 数据 库 ， 获 取 reservations.json 中 的 内 容 ， 
并 存储 起 来 ， 随 后 DOM 结构 会 使 用 本 地 数据 库 中 的 预订 数据 进行 更 新 。 如 果 你 再 次 刷新 
页 面 ， 就 会 显示 同样 的 数据 ， 但 是 页 面 不 会 发 起 reservations.json 的 请 求 。 数 据 是 直接 从 本 
地 数据 库 加 载 的 。 


如 果 用 户 要 创建 新 的 预订 ， 或 者 其 中 一 个 预订 的 状态 发 生 了 变化 ， 会 怎么 样 呢 ? 目前 ， 一 且 
预订 数据 检索 并 存储 到 本 地 数据 库 之 后 ， 数 据 就 不 会 发 生变 化 了 。 让 我 们 来 解决 这 个 问题 


在 reservations-store.js 中 ， 将 以 下 代码 添加 到 getReservations() 的 定义 之 前 : 


var addToObjectStore = function(storeName, object) { 
openObjectStore(storeName, function(store) { 
store.add(object); 
}, "readwrite"); 


}; 















































var updateInObjectStore = function(storeName, id, object) { 
openObjectStore(storeName, function(objectStore) { 
objectStore.openCursor().onsuccess = function(event) { 
var cursor = event.target.result; 
if (!cursor) { return; } 
if (cursor.value.id === id) { 
cursor .update(object); 
return; 
} 
cursor .continue(); 
}; 
}, "readwrite"); 


}; 





第 一 个 新 函数 接收 对 象 存储 的 名 称 以 及 要 放 进 存储 的 新 对 象 作 为 参数 。 这 个 函数 可 以 这 样 
调用 : 
addToObjectStore("reservations", { id: 123, nights: 2, guests: 2 }); 
第 二 个 函数 接收 对 象 存 储 的 名 称 ， 找 到 与 给 定 id 参数 匹配 的 id 的 对 象 ， 并 用 它 更 新 新 对 
象 。 这 是 通过 在 对 象 存储 上 打开 readwrite 事务 ， 并 使 用 游标 进行 迭代 来 完成 的 。 在 游标 
到 达 最 后 一 条 记录 或 者 匹配 成 功 之 前 ， 函 数 会 一 直 迭 代 。 如 果 找 到 匹配 项 ， 就 会 通过 调用 
cursor.update(object) 进行 更 新 。 此 时 ， 函 数 会 通过 return 退出 执行 ， 因 为 一 旦 找到 匹 
配 ， 就 不 需要 继续 迭代 下 一 条 记录 了 。 这 个 函数 可 以 这 样 调用 : 
updateInObjectStore("reservations", 123, { id: 123, nights: 5, guests: 1 }); 
最 后 一 步 是 在 IndexedDB 中 添加 或 更 新 数据 时 调用 这 两 个 函数 。 
在 my-account.js 中 修改 addReservation 方法 ， 让 其 在 添加 新 预订 到 服务 器 之 前 ， 先 调用 
addTo0bjectstore()。 修 改 后 的 函数 应 该 如 下 所 示 : 


var addReservation = function(id, arrivalDate, nights, guests) { 
var reservationDetails = { 





























id: id, 

arrivalDate: arrivalDate, 

nights: nights, 

guests: guests, 

status: "Awaiting confirmation" 
}; 


addToObjectStore("reservations", reservationDetails); 
renderReservation(reservationDetails); 
$.getJSON("/make-reservation", reservationDetails, function(data) { 
updateReservationDisplay(data); 
]); 
}; 


在 my-account.js 中 修改 checkUnconfirmedReservations 方法 ， 无 论 服 务 端 是 否 返 回 新 的 数 
据 ， 都 调用 updateIn0bjectStore 方 法。 修改 后 的 函数 应 该 如 下 所 示 : 


var checkUnconfirmedReservations = function() { 
$(".reservation-card--unconfirmed").each(function() { 
$.get]JSON( 

"/reservation-details.json", 

{id: $(this).data("id")}, 

function(data) { 
updateInObjectStore("reservations", data.id, data); 
updateReservationDisplay(data); 
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6.5 promise 式 的 数据 库 


现在 你 已 经 对 IndexedDB 略 知 一 二 了 ， 可 能 你 会 开始 注意 到 它 的 缺点 。 作 为 一 个 早 于 


promise 提出 的 API，IndexedDB 在 很 大 程度 上 依赖 于 回调 
回调 函数 铺 平 的 。 


由 














常言 道 ， 通 往 地 狱 的 路 就 是 


让 我 们 看 看 以 下 代码 ， 使 用 回调 函数 来 更 新 IndexedDB 中 的 对 象 : 


var request = window.indexedDB.open("gih-reservations", 1); 


request.onerror = function(event) { 
console.log("Database error: ", event.target.error); 


}; 


request.onsuccess = function(event) { 
var db = event.target.result; 
var objectStore = db 
.transaction("reservations", "readwrite") 
.objectStore("reservations"); 


var request = objectStore.add({id:1, rooms: 1, guests: 2}); 
request.onsuccess = function(event) { 
ConsoLe.Log("0bject added"); 
}; 
request.onerror = function(event) { 
console.log("Database error: ", event.target.error); 
}; 
}; 


我 们 打开 了 一 个 打开 数据 库 的 请 求 ， 然 后 把 回调 附加 到 该 请 求 上 。 在 回调 中 ， 我 们 又 进 一 
步 请 求 了 事件 ， 再 一 次 附加 回调 ， 以 此 类 推 。 实 际 上 ， 这 个 示例 代码 只 是 使 用 IndexedDB 



































的 一 个 很 简单 的 例子 。 你 打开 的 请 求 越 多 ， 代 码 量 就 越 大 ， 长 此 以 往 ， 应 用 就 会 陷入 到 俗 
称 的 回调 地 狱 中 。 





现在 ， 我 们 来 考虑 使 用 promise 式 的 IndexedDB 语法 作为 替代 。 代 码 可 能 是 这 样 的 ， 


openDatabase("gih-reservations", 1).then(function(db) { 

return openObjectStore(db, "reservations", "readwrite"); 
}).then(function(objectStore) { 

return addObject(objectStore, {id: 1, rooms: 1, guests: 2}); 
}).then(function() { 

console.log("Object added"); 
}).catch(function(errorMessage) { 

ConsoLe.Log("Database error: ", errorMessage); 


}); 


这 种 方式 编写 的 代码 可 读 性 要 好 得 多 ， 并 且 我 们 可 以 轻易 地 扩展 它 ， 而 不 会 陷入 到 回调 地 
狱 中 。 
幸运 的 是 ，JavaScript 让 我 们 可 以 轻松 地 将 使 用 回调 的 异步 代码 转换 成 promise。 


在 试图 构建 基于 promise 的 mdexedDB 替代 方案 之 前 ， 我 们 先 来 看 看 如 何 将 一 个 简单 的 异 
步 API 转换 成 基于 promise 的 API: 
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var request = new XMLHttpRequest( ) ; 


request.onLoad = function() { 
// 处 理 响应 
}; 





request.onerror = function() { 
// 处 理 错 误 
} 





request.open("get", "/events.json", true); 
request.send(); 


这 段 代码 是 旧式 的 异步 XMLHttpRequest 代码 ， 依 赖 于 回调 。 
如 何 将 其 变 成 基于 promise 的 API ? 这 个 逻辑 看 起 来 应 该 如 下 所 示 : 


在 请 求 一 个 基于 promise 的 XMLHttpRequest 时 : 
创建 一 个 新 promise 

在 promise 中 运行 : 
var request = new XMLHttpRequest(); 

当 request.onload 被 调用 时 ， 调 用 promise 的 resolve 事 件 
























































当 request.onerror 被 调用 时 ， 调 用 promise 的 reject 事 件 
将 XMLHttpRequest 发 送 到 互联 网 的 某 处 


返回 promise 


在 JavaScript 中 ， 代 码 看 起 来 就 像 这 样 : 


var promised_ XMLHttpRequest = function(url, method) { 
return new Promise(function(resolve, reject) { 
var request = new XMLHttpRequest(); 
request.onLoad = resolve; 
request.onerror = reject; 
request.open(method, url, true); 
request. send(); 
})); 
}; 














这 个 新 的 promised_XMLHttpRequest 函数 ， 接 收 一 个 url 和 method， 并 返回 一 个 new Promise。 
这 个 新 的 promise 中 传 入 了 一 个 回调 函数 ， 其 中 包含 了 我 们 的 XMLHttpRequest 代码 。 要 记 
住 ， 这 个 回调 函数 同时 包含 了 resolve 和 reject 参数 ， 我 们 可 以 在 完成 或 者 拒绝 promise 
时 ,分 别 调用 这 两 个 函数 其 中 之 一 。 在 新 的 XMLHttpRequest 代码 中 ， 当 XMLHttpRequest 
的 onLoad 回调 执行 时 ， 我 们 完成 promise， 当 XMLHttpRequest 的 onerror 回调 执行 时 ， 我 
们 拒绝 promise。 
换 名 话说， 在 promise 中 的 XMLHttpRequest 代码 依然 是 旧式 的 回调 风格 代码 。 但 是 我 们 
将 promise 的 回调 赋值 给 XMLHttpRequest， 让 它 可 以 跟 promise 交互 。 
然后 ， 我 们 就 可 以 调用 新 的 promised_XMLHttpRequest() 函数 ， 并 像 使 用 promise 那样 
它 进 行 交 互 : 

promised _ XMLHttpRequest("/events.json", "get").then(function() { 


// 处 理 响 应 
}).catch(function() { 























局 
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// 处 理 错误 
}); 


使 用 相同 的 方法 ， 我 们 就 可 以 用 promise 包装 不 同 的 IndexedDB 函数 ， 并 创建 出 openDatabase()、 
open0bjectStore() 和 addobject() 函数 : 











var openDatabase = function(dbName, dbVersion) { 
return new Promise(function (resolve, reject) { 
if (!window.indexedDB) { 
reject("IndexedDB not supported"); 


} 
var request = window.indexedDB.open(dbName, dbVersion); 


request.onerror = function(event) { 
reject("Database error: " + event.target.error); 


}; 


request.onupgradeneeded = function(event) { 
// 更 新 的 代码 
}; 


request.onsuccess = function(event) { 
resolve(event.target.result); 
}; 
]); 
}; 


var openObjectStore = function(db, storeName, transactionMode) { 
return new Promise(function (resolve, reject) { 
var objectStore = db 
.transaction(storeName, transactionMode) 
.objectStore(storeName ) ; 
resolve(objectStore); 
}); 
}; 


var addObject = function(objectStore, object) { 
return new Promise(function (resolve, reject) { 
var request = objectStore.add(object); 
request.onsuccess = resolve; 
}); 
}; 


现在 ， 我 们 拥有 了 IndexedDB 基于 promise 的 API， 可 以 用 它 来 更 加 优雅 地 访问 数据 库 : 


openDatabase("gih-reservations", 1).then(function(db) { 

return openObjectStore(db, "reservations", "readwrite"); 
}).then(function(objectStore) { 

return addObject(objectStore, {id:1, rooms: 1, guests: 2}); 
}).then(function() { 

ConsoLe.Log("0bject added"); 
}).catch(function(errorMessage) { 

console.log("Database error: ", errorMessage); 


}); 








合 迄今 为 止 学 到 的 一 切 ， 我 们 就 可 以 使 用 promise， 重 写 哥 谭 帝 国 酒店 的 IndexedDB 代 
码 了 。 这 样 我 们 就 可 以 在 下 一 章 中 使 用 更 加 简单 的 方式 来 访问 数据 库 。 
将 reservations-store.js 中 的 内 容 修改 成 下 列 代码 : 


Var DB_VERSION = 1; 
var DB_NAME = "gih-reservations"; 




















var openDatabase = function() { 
return new Promise(function(resolve, reject) { 
// 在 使 用 IndexedDB 之 前 ， 要 确保 它 是 被 支持 的 
if (!window.indexedDB) { 
reject("IndexedDB not supported"); 




















} 
var request = window.indexedDB.open(DB_NAME, DB_VERSION); 
request.onerror = function(event) { 

reject("Database error: " + event.target.error); 


}; 


request.onupgradeneeded = function(event) { 
var db = event.target.result; 
if (!db.objectStoreNames.contains("reservations")) { 

db.createObjectStore("reservations", 

{ keyPath: "id" } 

); 
} 

}; 


request.onsuccess = function(event) { 
resolve(event.target. result); 
}; 
]); 
}» 


var openObjectStore = function(db, storeName, transactionMode) { 
return db 
.transaction(storeName, transactionMode) 
.objectStore(storeName ) ; 


中 


var addToObjectStore = function(storeName, object) { 
return new Promise(function(resolve, reject) { 
openDatabase().then(function(db) { 
openObjectStore(db, storeName, "readwrite") 
.add(object).onsuccess = resolve; 
}).catch(function(errorMessage) { 
reject(errorMessage); 
]); 
]); 
}; 


var updateInObjectStore = function(storeName, id, object) { 
return new Promise(function(resolve, reject) { 
openDatabase().then(function(db) { 
openObjectStore(db, storeName, "readwrite") 
.OpenCursor().onsuccess = function(event) { 
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var cursor = event.target.result; 
if (!cursor) { 
reject("Reservation not found in object store"); 


} 
if (cursor.value.id === id) { 
cursor .update(object).onsuccess = resolve; 
return; 
} 
cursor .continue(); 
}; 


}).catch(function(errorMessage) { 
reject(errorMessage); 

]); 

}); 

}; 


var getReservations = function() { 
return new Promise(function(resolve) { 
openDatabase().then(function(db) { 
var objectStore = openObjectStore(db, "reservations"); 
var reservations = []; 
objectStore.openCursor().onsuccess = function(event) { 
var cursor = event.target.result; 
if (cursor) { 
reservations.push(cursor .value); 
cursor .continue(); 
} else { 
if (reservations.length > 0) { 
resolve(reservations); 
} elsef{ 
getReservationsFromServer().then(function(reservations) { 
openDatabase().then(function(db) { 
var objectStore = 
openObjectStore(db, "reservations", "readwrite"); 
for (var i = 0; i < reservations.length; i++) { 
objectStore.add(reservations[i]); 
} 
resolve(reservations); 
]); 
]); 
} 


} 
}; 
}).catch(function() { 
getReservationsFromServer().then(function(reservations) { 
resolve(reservations); 
]); 
]); 
]); 
}; 


var getReservationsFromServer = function() { 
return new Promise(function(resolve) { 
$.getJSON("/reservations.json", resolve); 


]); 




















这 份 新 代码 使 用 了 本 节 前 面 介绍 的 技术 ， 让 我 们 得 以 修改 函数 并 返回 promise。 它 还 把 从 
服务 端 获取 预订 数据 的 代码 提取 到 了 一 个 名 为 getReservationsFromServer() 的 新 国 数 中 ， 


并 返回 一 个 promise。 

我 们 唯一 没有 修改 成 返回 promise 的 函数 是 open0bjectstore()。 在 Firefox 
中 ，promise 打开 的 事务 会 在 promise 的 resolve 运行 之 前 完成 。 换 句 话 说， 
当 我 们 试图 在 promise 中 打开 对 象 存储 的 时 候 ， 对 象 存储 的 事务 已 经 关闭 了 。 





























修改 后 的 getReservations() 函数 也 会 返回 promise。 它 封装 了 所 有 的 游标 遍历 ， 而 不 是 将 
甚 暴露 给 代码 的 其 余部 分 ， 并 且 只 有 在 完成 对 象 存 储 中 所 有 条 目的 遍历 ， 并 从 此 构建 出 一 
个 新 数组 之 后 ， 才 完成 这 个 promise。 
无 论 我 们 从 IndexedDB 还 是 从 服务 端 获 取 预 订 数据 ，getReservations() 都 会 把 所 有 的 异 
步 复 杂 性 隐藏 到 一 个 友好 的 promise 接口 中 ， 然 后 我 们 可 以 在 populateReservations() 中 
使 用 它 : 

var populateReservations = function() { 

getReservations().then(function(reservations) { 

renderReservations(reservations); 

}); 

}; 
可 以 看 到 ，then 接收 了 一 个 只 接收 一 个 参数 的 函数 ， 并 且 调 用 了 另外 一 个 只 接收 一 个 参数 
的 函数 。 我 们 可 以 进一步 简化 代码 ， 直 接 把 这 个 函数 传递 给 then: 

var populateReservations = function() { 


getReservations().then(renderReservations); 


}; 


在 my-account.js 中 ， 修 改 populateReservations() 函数 ， 改 为 使 用 新 的 基于 promise 的 
getReservations() 函数 ， 如 上 述 的 代码 片段 所 示 。 


6.6 IndexedDB 管 理 


和 缓存 一 样 ， 当 你 在 IndexedDB 中 存储 越 来 越 多 的 数据 时 ， 需 要 考虑 在 用 户 设备 上 占用 的 
存储 量 。 

对 于 哥 谭 帝国 酒店 应 用 来 说 ， 这 不 太 可 能 成 为 问题 ， 用 户 它 使 用 的 数据 量 增长 缓慢 ， 而 且 
呈 线 性 。 但 是 ， 让 我 们 在 不 同上 下 文中 考虑 IndexedDB 的 情况 一 一 我 们 的 消息 应 用 。 

应 用 可 以 将 所 有 从 服务 端 接收 到 的 数据 存储 到 IndexedDB ， 从 本 地 数据 库 填 充 接口 数据 ， 
取代 网 络 方案 。 它 甚至 允许 用 户 在 离线 时 编写 新 的 消息 (或许 是 将 消息 保存 在 一 个 未 发 送 
消息 的 对 象 存储 中 )。 通 过 采用 这 种 方法 ， 我 们 可 以 实现 一 个 在 离线 情况 下 也 能 拥有 部 分 
在 线 功能 的 应 用 ， 唯 一 不 同 的 只 是 内 容 的 新 鲜 程 度 。 

但 是 ， 在 IndexedDB 中 保存 所 有 的 消息 将 会 占用 用 户 设备 越 来 越 多 的 内 存 空间 。 最 终 ， 我 
们 可 能 会 达到 浏览 器 分 配给 我 们 的 存储 限制 。 在 构建 应 用 时 ， 负 责任 的 做 法 是 先 从 对 象 存 
储 中 删除 旧 的 消息 ， 只 保留 最 新 消息 。 其 中 一 种 做 法 ， 是 在 消息 的 发 布 日 期 上 使 用 索引 ， 
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通过 索引 获取 消息 ， 并 删除 所 有 旧 于 特定 天 数 的 消息 。 另 外 一 种 办 法 ， 是 保留 最 新 的 100 


条 消息 ， 并 删除 所 有 更 旧 的 消息 。 


无 论 你 选择 哪 种 方式 ， 始 终 考 虑 在 用 户 设备 上 占用 的 空间 ， 并 负责 任 地 采取 行动 ， 才 是 最 
重要 的 。 请 记 住 ， 当 到 达 某 个 存储 上 限时 ， 你 在 用 户 设备 上 存储 的 任何 数据 都 可 能 会 被 清 





除 。 有 关 存 储 限 制 的 详细 信息 ， 请 参见 4.5 市 中 的 “ 











存储 限制 。 





如 果 你 想 要 确保 保存 的 数据 不 会 被 自动 删除 ， 在 Chrome 和 Opera 中 ， 可 以 


使 用 新 的 实验 性 API， 向 设备 请 求 持久 化 存储 的 权限 : 
if (navigator.storage && navigator.storage.persist) { 
navigator .storage.persist().then(function(granted) { 


if (granted) { 
console.log("Data will not 


}98 
} 


be deleted automatically"); 








一 旦 授权 后 ， 存 储 的 任何 内 容 将 不 会 被 设备 自动 删除 。 内 容 只 能 通过 用 户 操 





作 进 行 删除 。 

















6.7 在 service worker 中 使 用 IndexedDB 


在 第 7 章 中 ， 我 们 需要 从 service worker 访问 reservations 对 象 存 储 。 幸 运 的 是 ， 在 
service worker 中 访问 IndexedDB 的 方式 ， 和 通过 页 面 访问 的 方式 完全 一 样 。 


为 了 避免 重 写 所 有 我 们 斑斑 苦 苦 写 好 的 mdexedDB 
以 在 service worker 中 正常 工作 ， 就 像 在 页 面 上 一 样 


要 做 到 这 一 点 ， 需 要 实现 两 件 事 。 

















代码 ， 需 要 确保 reservations-store.js 可 


o 


首先 ， 我 们 的 代码 使 用 window.indexedDB 来 调用 IndexedDB API。 然 而 在 service worker 中 





无 法 访问 window 对 象 。 它 是 在 一 个 完全 不 同 的 上 下 文中 运行 的 。service worker 可 以 通过 


它 可 访问 的 全 局 对 象 来 访问 IndexedDB。 





为 了 编写 可 以 同时 在 service worker 和 页 面 中 运行 的 代码 ， 可 以 使 用 seLf.indexedDB。 在 
service worker 中 ，self 会 指向 全 局 对 象 ， 而 在 页 面 中 ，self 会 指向 window。 


在 reservations-store.js 中 ， 将 每 一 个 window.indexedDB 的 调用 ， 修 改 为 self.indexedDB 











(应 该 只 有 两 处 需要 修改 )。 


接 下 来 是 我 们 应 用 特有 的 一 个 修改 。 在 reservations-store.js 的 末尾 是 getReservations- 


Fromserver() 的 代码 。 现 有 的 代码 是 这 样 的 : 


var getReservationsFromServer = function() { 


return new Promise(function(resolve, reject) { 


$.getJSON("/reservations.json", resolve); 
]); 
}; 


你 能 发 现 其 中 的 问题 吗 ? 

















我 们 在 此 处 处 理 的 代码 依赖 于 jQuery 函数 $.get]JSON 来 获取 reservations.json 文件 。 不 幸 的 
是 (或 者 说 ， 幸 运 的 是 ) ， 在 service worker 中 我 们 没有 引入 jQuery， 所 以 调用 $.getJSON 会 
导致 报错 。 我 们 可 以 使 用 fetch() 来 替换 这 段 代 码 ， 它 可 以 同时 在 页 面 和 service worker 中 工 
作 ， 不过， 在 旧 的 浏览 器 中 fetch 可 能 不 能 正常 工作 。 由 于 我 们 不 打算 放弃 这 部 分 用 户 ， 所 
以 会 在 代码 中 同时 包含 fetch() 和 $.getJSON， 并 使 用 功能 检测 来 判断 哪 一 个 是 可 用 的 。 


在 reservations-store.js 中 ， 将 getReservationsFromServer() 的 代码 替换 为 如 下 代码 : 


var getReservationsFromServer = function() { 
return new Promise(function(resolve) { 
if (self.$) { 
$.getJSON("/reservations.json", resolve); 
} else if (self.fetch) { 
fetch("/reservations.json").then(function(response) { 
return response.json(); 
}).then(function(reservations) { 
resolve(reservations); 
}); 
} 
}); 
}; 
这 段 代码 首先 检测 了 self (window 或 者 service worker 的 全 局 对 象 ) 中 是 否 可 以 使 用 $ 
( 即 jQuery)。 如 果 可 以 ， 代 码 就 使 用 $.get]JSON 来 获取 JSON， 并 完成 promise。 否 则 ， 代 
码 会 检查 fetch 是 否 可 用 ， 如 果 可 用 就 使 用 它 来 获取 JSON。 


当 我 们 调用 fetch("/reservations.json") 时 ， 会 得 到 一 个 promise， 其 中 包含 了 响应 对 象 。 
由 于 响应 对 象 中 包含 了 JSON， 我 们 可 以 使 用 对 象 的 json 方法 ， 得 到 解析 后 的 JSON 数据 
(当然 ， 这 是 包含 在 promise 中 的 )。 随 后 ， 我 们 可 以 使 用 JSON 创建 出 的 对 象 ， 完 成 我 们 


的 promise。 

现在 ，reservations-store.js 文件 已 经 准备 好 在 service worker 中 使 用 了 。 
在 serviceworker.js 文件 的 顶部 ， 添 加 这 行 代码 : 
importScripts("/js/reservations-store.js"); 


在 service worker 中 ，importSscripts 是 可 以 用 来 加 载 脚本 的 特殊 方法 。 


6.8 IndexedDB 生 态 系统 


开源 社区 已 经 出 现 了 许多 IndexedDB 相关 的 库 ， 致 力 于 使 mdexedDB 更 易 用 。 其 中 的 一 些 
库 通 过 使 用 promise 替代 回调 式 的 代码 ， 让 IndexedDB 的 使 用 变 得 更 加 优雅 ， 另 一 些 库 则 
专注 于 提高 跨 浏 览 器 的 兼容 性 ， 或 者 是 简化 浏览 器 和 服务 器 之 间 的 数据 同步 。 


下 面 介绍 四 个 比较 受 欢迎 的 库 。 






















































































6.8.1 PouchDB 
PouchDB 的 创建 目标 是 在 浏览 器 中 运行 一 个 JavaScript 数据 库 ， 让 应 用 可 以 在 离线 时 在 本 
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地 存储 数据 。 

PouchDB 受到 了 CouchDB 数据 库 的 启发 ， 两 者 可 以 轻易 地 结合 在 一 起 ， 让 你 的 应 用 可 以 
在 浏览 器 和 服务 器 之 间 同 步 数 据 。 

PouchDB 优先 使 用 IndexedDB ， 如 果 不 支 持 IndexedDB 或 者 缺少 革 些 功能 ， 则 使 用 Web 
SQL 作为 回 退 (这 是 一 个 老式 的 、 被 抛弃 的 API， 在 许多 浏览 器 中 依然 支持 ) : 


var db = new PouchDB("reservations-db"); 

















db.put({ 
_id: 1， 
nights: 3， 
guests: 2 


}); 


db.changes().on("change", function() { 
ConsoLe.Log("Reservations database changed"); 


}); 


db.replicate.to("https://db.gothamimperial.com/mydb"); 


6.8.2 localForage 


localForage 是 一 个 使 用 localStorage 风格 API (同时 支持 回调 和 promise) 的 浏览 器 
JavaScript 数据 库 ， 可 以 用 来 简化 离线 应 用 的 创建 。 


它 依赖 于 IndexedDB 或 WebSQL， 并 在 旧 浏 览 器 中 回 退 到 localStorage: 








var id = 1; 
LocaLforage 
.setItem(id, { nights: 3, guests: 2 }) 
.then(function() { 
return localforage.getItem(id); 


}) 
.then(function(reservation) { 
console.log("Reservation "+id+" is for "+reservation.nights+" nights"); 


]); 


6.8.3 Dexie.js 


Dexie.js 包装 了 IndexedDB ， 通 过 许多 方式 提升 了 IndexedDB 的 开发 体验 ， 包 括 优雅 的 
PI、 更 简单 的 查询 ， 以 及 改进 的 错误 处 理 : 
var db = new Dexie("reservations"); 
// 定义 一 个 schema 
db.version(1).stores({ 


reservations: "++id, ,nights, guests" 


}); 


db.open(); 





db.reservations 
.where("guests") 
.above(8) 
.each(function (reservation) { 
console. log( 
"Reservation " + reservation.id + " for " + reservation.nights + " nights" 
); 
}); 


6.8.4 IndexedDB Promised 


IndexedDB Promised 是 一 个 轻 量 的 包装 库 ， 其 目的 是 改进 IndexedDB 的 使 用 体验 。 只 需要 
简单 一 句 话 就 可 以 概括 它 的 功能 :“Promise 风格 的 IndexedDB”。 
idb.open("reservations", 1, function(upgradeDB) { 
return upgradeDB.createObjectStore("reservations"); 
}).then(function(db) { 
return db.transaction("reservations").objectStore("reservations").get(1); 
}).then(function(reservation) { 
console.log("Reservation for " + reservation.nights + " nights"); 


]) 


6.9 小 结 


通过 使 我 们 的 应 用 能 够 在 本 地 数据 库 中 存储 、 修 改 并 访问 数据 ， 我 们 成 功 实现 了 切断 服务 
器 依赖 的 最 后 一 步 。 


通过 组 合 service worker、 缓 存 和 本 地 数据 库 ， 我 们 最 终 可 以 构建 一 个 与 用 户 连 接 状 态 无 关 
的 渐进 式 Web 应 用 。 这 类 应 用 可 以 在 毫秒 级 别 内 加 载 ， 显 示 并 操作 内 容 和 数据 。 和 原生 应 
用 类 似 ， 仅 只 要 当 我 们 想 从 服务 器 中 检索 更 新 的 数据 和 内 容 ， 或 者 就 用 户 操作 与 服务 器 通 
信 时 ， 才 需要 网 络 连接 。 


哥 谭 帝国 酒店 的 客户 可 以 随时 随地 访问 他 们 的 账号 页 面 ， 无 论 他们 的 网 络 连接 状况 如 何 。 
他 们 可 以 看 到 预订 的 状态 和 详情 ， 并 查看 酒店 即将 举行 的 活动 。 

不 仅 如 此 ， 我 们 还 可 以 更 进一步 ， 让 用 户 在 离线 状态 下 也 能 够 发 起 新 的 预订 。 试 想 ， 用 户 
不 仅 可 以 在 离线 状态 下 看 到 内 容 和 数据 ， 还 可 以 进行 操作 ， 并 在 下 一 次 上 线 时 将 这 些 操作 
同步 给 服务 器 。 

要 实现 这 一 点 ， 一 种 方法 是 在 IndexedDB 中 存储 离线 的 预订 ， 并 添加 一 段 脚本 在 页 面 中 定 
时 运行 ， 将 所 有 在 IndexedDB 中 找到 的 离线 预订 添加 到 服务 器 。 但 是 ， 这 种 方法 要 求 用 户 
一 直 打 开 应 用 ， 直 到 连接 恢复 后 ， 操 作 才 能 完成 。 

在 第 7 章 中 ， 我 们 将 研究 一 种 最 令 人 兴奋 的 新 技术 ， 让 用 户 即 使 在 离线 时 也 能 进行 操作 ， 
并 且 一 旦 连接 恢复 ， 这 些 操作 就 能 继续 进行 ， 甚 至 在 用 户 关闭 浏览 器 之 后 也 是 如 此 。 
















































































使 用 IndexedDB 在 本 地 存储 数据 | 107 








第 7 章 


使 用 后 台 同 步 保证 离线 功能 





对 用 户 来 说 ， 没 有 什么 比 填写 表单 ， 点 击 提交 按钮 ， 然 后 得 到 一 个 连接 错误 响应 更 加 令 人 
诅 走 的 了 。 填 写 表单 是 一 个 缓慢 且 诅 趟 的 过 程 ， 尤 其 是 在 移动 设备 上 一 一 因为 在 不 恰当 的 
时 刻 进 了 电梯 ， 然 后 所 有 的 努力 都 白费 了 ， 这 让 很 多 用 户 非 常 诅 形 。 

缓慢 、 不 可 靠 的 连接 同样 令 人 诅 均 。 如 果 我 们 点 击 了 网 站 上 的 某 个 按钮 ， 等 待 结果 发 生 ， 
然后 一 旦 我 们 不 想 再 等 了 ， 试 图 在 操作 完成 结束 之 前 跳 转 页 面 ， 会 发 生 什么 呢 ? 操作 可 能 
会 在 我 们 不 知情 的 情况 下 完成 ， 也 可 能 不 会 完成 。 作 为 开发 者 ， 我 们 不 得 不 求助 于 一 些 技 
术 ， 诸 如 监听 页 面 的 onbeforeunload 事件 ， 然 后 显示 一 条 信息 ， 司 求 用 户 再 等 一 会 (实际 
显示 的 按钮 是 OK/ 取消 一 一 坦白 说 ， 我 记 不 清 其 中 的 哪个 按钮 意味 着 等 待 了 ， 具 体 参见 图 
7-1)。 















































localhost:8443 says: 


Your reservation is currently being processed. 


Please, please, please hold on a few more seconds/minutes/indefinitely. 
Check Availability 
Prevent this page from creating additional dialogs. 


cre) ED 


Gotham Imperial Hotel 
mperial Plaza, Gotham。 Tolalprice 
Check-in: November Sth 2022. §675.99 


3nights. 2 guests. 





办 Modify booking detalls Confirmed 
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作为 用 户 ， 我 们 不 能 接受 那些 时 不 时 会 抹 去 所 有 辛勤 工作 的 软件 。 每 当 附近 的 信号 塔 负载 
太 高 ， 我 们 都 期 望 软件 和 移动 应 用 不 要 这 样 对 竺 我们。 然而 不 幸 的 是 ， 这 依然 是 试图 在 移 
动 Web 上 完成 工作 时 所 面临 的 现实 。 


这 种 固有 的 不 可 靠 性 一 直 是 Web 与 原生 应 用 的 主要 不 同 。 现 在 ， 一 项 称 为 后 台 同 步 
(background sync) 的 新 技术 ， 终 于 让 我 们 可 以 对 此 做 些 什么 了 。 


后 台 同 步 使 得 我 们 能 够 确保 用 户 采 取 的 任何 操作 都 能 完成 〈 无 论 是 填写 表单 、 点 击 “ 请 回 
复 ” 按 钮 ， 还 是 发 送 消息 )， 不 管用 户 的 连接 状态 如 何 。 其 至 即使 用 户 离开 我 们 的 Web 应 
用 ,不 再 回来 ， 并 关闭 浏览 器 ， 后 台 同 步 操 作 也 能 够 完成 。 这 是 浏览 器 近年 来 给 我 们 带 来 
的 最 有 价值 的 工具 之 一 。 它 可 能 不 像 消息 推送 、 主 屏 图 标 甚至 是 离线 功能 那 般 耀眼 。 如 有 果 
实现 恰当 ， 它 的 影响 对 于 用 户 是 不 可 见 的。 但 是 ， 正 因 同 步 功 能 在 后 台 不 知 疲倦 地 工作 ， 
用 户 的 任务 才能 得 以 完成 。 

对 于 用 户 而 言 ， 能 够 信任 你 的 渐进 式 Web 应 用 总 是 能 够 工作 (不 仅 是 有 时 能 工作 ， 并 且 不 
依赖 于 连接 、 接 收 或 者 天 气 状 况 )， 意 味 着 传统 的 Web 应 用 和 这 种 应 用 是 有 差异 的 ， 后 者 
能 够 实现 原生 应 用 般 的 效果 。 

对 于 企业 来 说 ， 让 用 户 在 连接 失败 时 也 能 够 订 票 、 订 阅 新 闻 或 者 发 送 消息 时 ， 对 他 们 的 底 
线 也 会 产生 积极 的 影响 。 

后 台 同 步 作为 一 种 低调 的 、 相 对 简单 的 实现 方式 ， 是 现代 渐进 式 Web 应 用 的 核心 组 件 ， 也 
是 “离线 优先 ”的 最 后 一 个 要 素 。 


7.1 ”后台 同步 是 如 何 工作 的 


使 用 后 台 同 步 的 实质 ， 是 将 操作 从 页 面 上 下 文中 剥离 开 ， 并 在 后 台 运 行 。 
通过 将 这 些 操 作 放 到 后 台 ， 它 们 就 不 会 受到 单个 网 页 行为 不 可 预测 性 的 影响 。 网 页 会 被 关 
闭 ， 用 户 连 接 可 能 会 断 开 ， 其 至 服务 器 有 了 时候 也 会 故障 。 但 是 ， 只 要 用 户 设备 上 安装 了 浏 
览 器 ， 后 台 同 步 中 的 操作 就 不 会 消失 ， 直 到 它 成 功 完成 为 止 。 
你 应 该 考虑 用 后 台 同 步 来 处 理 任 何 超出 当前 页 面 生命 周期 的 操作 。 无 论 用 户 要 发 送 消息 、 将 
待定 项 目标 记 为 已 完成 ， 还 是 添加 事件 到 日 历 ， 后 台 同 步 都 可 以 确保 操作 能 够 成 功 完成 。 
使 用 后 台 同 步 很 简单 ， 不 是 在 页 面 上 直接 执行 操作 (例如 Ajax 调用 )， 而 是 注册 一 个 同步 
事件 
navigator .serviceWorker .ready.then(function(registration) { 
registration.sync.register('send-messages'); 
]); 
这 段 代 码 可 以 在 页 面 中 运行 。 它 获取 了 当前 激活 service worker 的 registration 对 象 ， 并 用 
其 注册 了 一 个 称 为 send-messages 的 sync 事件 。 
接 下 来 ， 你 可 以 将 一 个 监听 该 同步 事件 的 事件 监听 器 添加 到 service worker 中 。 这 个 事件 
包含 的 逻辑 将 会 在 service worker 中 执行 ， 而 不 是 在 页 面 上 : 
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self.addEventListener("sync", function(event) { 
if (event.tag === "send-messages") { 
event.waitUntil(function() { 
var sent = sendMessages(); 


if (sent) { 
return Promise.resolve(); 
}else{ 
return Promise.reject(); 
} 
]); 
} 
]); 


注意 ， 事 件 监听 器 的 代码 使 用 waituntil 来 确保 我 们 可 以 控制 事件 结束 的 时 机 。 这 使 得 我 
们 有 了 时间 尝 试 执 行 某 些 操作 ， 如 果 操 作成 功 才 完成 事件 ， 否 则 就 拒绝 。 如 果 我 们 给 sync 
事件 返回 了 拒绝 的 promise， 浏 览 器 就 会 将 同步 操作 放 和 队列 ， 并 在 稍 后 重 试 。 这 个 名 为 
send-messages 的 同步 事件 会 一 直 重 试 直到 成 功 ， 甚 至 是 在 用 户 已 经 离开 应 用 的 情况 下 。 


让 我 们 再 次 回 到 示例 消息 应 用 ， 看 看 它 如 何 从 后 台 同 步 功能 中 获 益 。 

要 让 我 们 的 消息 应 用 取得 成 功 ， 必 须要 让 用 户 感 觉 到 应 用 是 可 信赖 的 。 用 户 
应 该 可 以 随时 打开 应 用 ， 写 下 他 们 的 想法 ， 点 击 提交 ， 然 后 继续 他 们 的 生活 。 
用 户 在 编写 消息 之 前 ， 不 需要 担心 连接 状态 。 用 户 永远 不 应 该 被 错误 消息 拒 
之 门 外 ， 然 后 被 要 求 重 试 。 连 接 丢 失 是 我 们 必须 计划 在 内 的 事情 ， 以 便 可 以 
优雅 地 处 理 它 。 如 果 这 种 情况 处 理 得 不 好 ， 就 会 破坏 用 户 对 应 用 的 信任 。 
WhatsApp 的 原生 应 用 完美 示范 了 这 一 点 。 你 可 以 随时 打开 它 (不 管 连接 状 
态 如 何 )， 编 写 消息 ， 并 知道 消息 将 会 尽快 发 送出 去 (可 能 是 马上 ;如 果 你 
目前 离线 ， 就 会 等 到 在 线 的 时 候 )。 即 使 关闭 应 用 ， 你 也 知道 并 相信 应 用 会 
在 后 台 发 送 你 的 消息 。WhatsApp 的 界面 甚至 还 以 清晰 简单 的 方式 传递 了 这 
一 点 。 如 果 你 在 离线 时 发 送 消 息 ， 它 会 像 任 何其 他 消息 一 样 ， 进 入 消息 流 
(增强 你 对 于 它 不 会 丢失 的 信心 )， 但 是 会 用 一 个 小 手表 图 标 来 指示 消息 是 计 
划 发 送 的 。 一 旦 发 送 成 功 ， 手 表 图 标 就 会 被 替换 成 复 选 标记 。 
采用 类 似 的 模式 ， 我 们 的 示例 消息 应 用 也 可 以 使 用 后 台 同 步 来 确保 消息 发 送 
( 见 图 7-2)。 当 用 户 发 送 消息 时 ， 应 用 可 以 立即 将 消息 添加 到 界面 上 ， 同 时 
用 一 个 小 图 标 来 展示 它 是 计划 发 送 的 。 随 后 ， 就 可 以 使 用 后 台 同 步 操作 将 其 
发 送 到 服务 器 ， 如 果 用 户 在 线 ， 就 会 立即 完成 ， 否 则 就 会 在 用 户 一 上 线 之 后 
完成 。 当 消息 发 送 后 ， 我 们 就 可 以 更 新 界面 ， 将 计划 发 送 的 消息 图 标 改 成 一 
个 时 间 惟 。 




















































































































这 种 用 户 体验 可 以 传达 出 对 应 用 的 一 种 信任 感 。 通 常 ， 这 种 信任 和 技术 本 身 一 样 重要 。 第 
11 章 会 探讨 渐进 式 Web 应 用 中 的 这 种 和 其 他 用 户 体验 考量 。 








TIMELINE MENTIONS MESSAGES 


Tal Ater @TalAter 

The only reason to ever choose HTTP over 
HTTPS is when you want to save one character 
when tweeting the link. 


Ran Magen @rmgn 

有 We put a man on the moon, and yet we can't 

加 -ome up with a new analogy for a successful 
achievement except "we put a man on the moon'"? 


Chuck Facts @chuckfacts 
When Alexander Bell invented the telephone he 
had 3 missed calls from Chuck Norris. 


Type message... 














图 7-2: 使 用 后 台 同 步 的 消息 应 用 


7.2 SyncManager 


我 们 已 经 看 到 了 注册 和 监听 sync 事件 的 代码 ， 下 面 来 了 解 其 工作 原理 。 


任何 与 sync 事件 的 交互 ， 都 是 通过 SyncManager 完成 的 。SyncManager 是 service worker 
的 一 个 接口 ， 让 我 们 可 以 注册 sync 事件 ， 并 获取 当前 已 注册 的 sync 事件 列表 。 




















7.2.1 访问 SyncManager 


我 们 可 以 通过 已 激活 的 service worker 的 registration 对 象 访问 SynceManager。 当 你 尝试 从 
service worker 和 页 面 自身 访问 registration 对 象 时 ， 获 取 的 方法 会 有 所 不 同 。 


在 service worker 中 ， 很 容易 通过 global 对 象 访问 service worker 的 registration 对 象 。 


self.registration 





在 一 个 由 service worker 控制 的 页 面 里 ， 可 以 通过 二 调用 navigator .serviceWorker.ready 访 
问 当 前 激活 的 service worker 的 registration 对 象 ， 这 个 方法 返回 一 个 promise， 成 功 时 可 以 
拿 到 service worker 的 registration 对 象 。 


navigator .serviceWorker.ready.then(function(registration) {}); 
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获得 了 service worker 的 registration 对 象 后 ， 无 论 是 在 service worker 还 是 页 面 上 ， 与 
SyncManager 的 交互 操作 都 是 相同 的 。 


7.2.2 ”注册 事件 


要 注册 sync 事件 ， 可 以 在 SyncManager 中 调用 register， 传 入 一 个 你 想 要 注册 的 sync 事件 
名 称 〈 也 称 为 “标签 ” ) 。 


例如 ， 要 在 service worker 中 注册 一 个 send-messages 事件 ， 可 以 使 用 下 列 代 码 : 


self.registration.sync.register("send-messages"); 


要 在 service worker 控制 的 页 面 中 注册 同一 个 事件 ， 可 以 使 用 下 列 代码 : 


navigator .serviceWorker .ready.then(function(registration) { 
registration.sync.register("send-messages"); 


}); 


7.2.3 ” sync 事件 

让 我 们 回顾 一 下 ， 注 册 sync 事件 时 会 发 生 什 么 。 
SyncManager 维护 了 一 个 简单 的 sync 事件 标签 列表 。 这 个 列表 没有 包含 事件 是 什么 或 者 做 
什么 的 逻辑 。 这 些 实现 完全 取决 于 service worker 中 响应 sync 事件 的 代码 。SyncManager 
只 知道 哪些 事件 被 注册 ， 何 时 被 调用 ， 以 及 如 何 发 送 sync 事件 。 


当下 列 任何 一 个 事件 发 生 时 ，SyncManager 会 给 列表 中 的 每 一 个 注册 标签 发 送 一 个 sync 事件 : 


(1) sync 事件 注册 后 立即 发 送 ， 

(2) 当 用 户 状 态 从 离线 变 成 在 线 时 ，; 

(3) 每 隔 儿 分 钟 ， 如 果 有 尚未 完成 的 注册 时 。 

在 service worker 中 ， 发 送 的 sync 事件 可 以 被 监听 ， 并 使 用 promise 进行 响应 。 如 果 这 个 
promise 完成 ， 那 么 对 应 的 sync 注册 会 从 SyncManager 中 删除 。 如 果 promise 拒绝 ， 注 册 
会 保留 在 SyncManager 中 ， 并 在 下 一 个 同步 机 会 中 重 试 。 


7.2.4 ”事件 标签 


事件 标签 是 唯一 的 。 如 果 在 SyncManager 中 使 用 一 个 已 有 的 标签 来 注册 sync 事件 ， 
SyncManager 会 忽略 它 ， 而 不 是 添加 新 的 条 目 。 乍 看 起 来 这 似乎 有 局 限 性 ， 但 实际 上 它 是 
SyncManager 最 实用 的 特性 之 一 。 它 允许 将 许多 类 似 的 操作 (例如 待 发 送 的 邮件 ) 分 组 到 
单个 事件 中 。 随 后 ， 你 可 以 注册 一 个 sync 事件 ， 每 次 添加 一 个 新 操作 到 队列 时 ， 处 理 队 列 
中 的 所 有 操作 〈 例 如 电子 邮件 的 发 件 箱 ) ， 这 样 就 不 需要 首先 检查 事件 是 否 已 经 注册 ， 或 
者 当前 是 否 正在 运行 了 。 

举 个 例子 ,假如 你 正在 构建 一 个 邮件 服务 。 每 当 用 户 尝 试 发 送 消 息 时 ， 你 可 以 把 消息 保 
存 到 IndexedDB 的 发 件 箱 中 ， 并 注册 一 个 send-unsent-messages 的 后 台 同 步 事 件 。 随 后 ， 
service worker 可 以 包含 一 个 事件 监听 器 并 进行 响应 : 遍历 IndexedDB 发 件 箱 中 的 每 一 条 消 
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息 ， 尝 试 发 送 它 ， 并 在 成 功 发 送 后 ， 将 其 从 IndexedDB 队列 中 删除 。 如 果菜 条 消息 没有 成 
功 发 送 ， 整 个 sync 事件 就 会 被 拒绝 。SyncManager 将 在 稍 后 再 次 发 送 这 个 事件 ， 允 许 你 再 
次 尝试 清空 发 件 箱 ， 并 确保 只 有 在 上 一 次 事件 中 发 送 失 败 的 消息 (以 及 此 后 创建 的 任何 新 
消息 ) 才 会 被 发 送 。 

使 用 这 种 设置 ， 你 永远 不 需要 检查 发 件 箱 中 是 否 存在 消息 。 只 要 有 未 发 送 的 电子 邮件 ， 
sync 事件 就 会 保持 注册 ， 并 定期 尝试 清空 发 件 箱 。 在 7.4 节 中 ， 我 们 将 在 实践 中 看 到 这 一 
点 ， 我 们 在 用 户 离线 时 ， 维 护 一 份 酒店 预订 的 列表 。 

如 果 你 认为 确实 需要 单独 的 事件 ， 可 以 简单 地 给 事件 提供 唯一 的 名 称 ， 例 如 send-message-432、 


send-message-433 等 。 


7.2.5 获取 已 注册 sync 事 件 列表 
使 用 SyncManager 的 getTags() 方法 ， 你 可 以 得 到 完整 的 已 注册 同步 标签 列表 。 


意料 之 中 的 是 ， 和 大 部 分 service worker 接口 一 样 ，getTags() 会 返回 一 个 promise。 这 个 
promise 完成 后 ， 会 获得 一 个 包含 sync 注册 标签 名 称 的 数组 。 


让 我 们 来 看 一 个 完整 的 例子 。 在 service worker 中 注册 一 个 名 为 hetllo-sync 的 sync 事件 ， 
然后 将 当前 注册 的 完整 事件 列表 打印 到 控制 台中 : 
self.registration.sync 
.register("hello-sync") 
.then(function() { return self.registration.sync.getTags(); }) 
.then(function(tags) { 
console.log(tags); 


}); 
在 service worker 中 运行 这 段 代 码 ， 应 该 会 把 ["hello-sync"] 打印 到 控制 台中 。 


在 service worker 控制 的 页 面 中 ， 通 过 首先 使 用 ready 获取 registration 对 象 ， 可 以 取得 类 似 
的 结果 : 
navigator .serviceWorker .ready.then(function(registration) { 
registration.sync 
.register("send-messages") 
.then(function() { return registration.sync.getTags(); }) 
.then(function(tags) { 
console. log(tags); 
]); 
]); 
在 service worker 控制 的 页 面 中 运行 这 段 代 码 ， 应 该 会 把 ["send-messages"] 打印 到 控制 
台中 
村 守 。 


7.2.6 ”最 后 的 机 会 


在 某 些 情况 下 ，SyncManager 可 能 会 判断 出 尝试 发 送 的 sync 事件 已 经 多 次 失败 。 当 发 生 这 
种 情况 时 ，SyncManager 将 会 最 后 一 次 发 送 事件 ， 给 你 最 后 一 次 响应 它 的 机 会 。 你 可 以 通 
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过 使 用 sync 事件 的 LastChance 属性 ， 判 断 在 什么 时 候 会 发 生 这 种 情况 ， 并 决定 如 何 应 对 : 


self.addEventListener("sync", event => { 
if (event.tag == "add-reservation") { 
event .waitUntil( 
addReservation() 
.then(function() { 
return Promise.resolve(); 
}) 
.catch(function(error) { 
if (event.lastChance) { 
return removeReservation(); 
} elsef{ 
return Promise.reject(); 


使 用 后 台 同 步 的 代码 出 人 意料 地 简单 。 然 而 ， 在 现 有 的 Web 应 用 中 ， 实 现 后 台 同 步 并 不 总 
是 那么 简单 。 在 下 一 节 中 ， 我 们 将 讨论 如 何 解决 项 目 中 的 后 台 同 步 问 题 。 
后 台 同 步 的 浏览 器 支持 
从 Chrome 49 版 本 开始 ， 可 以 使 用 后 台 同 步 。 
在 本 书 编写 时 ，Opera、Mozilla Firefox 和 Microsoft Edge 正在 实现 这 项 功能 








7.3 ”传递 数据 给 sync 事 件 


通过 把 执行 操作 的 代码 从 页 面 移动 到 service worker， 我 们 可 以 确保 不 管 怎 样 它 都 将 被 执 
行 ， 但 是 我 们 也 引入 了 新 的 复杂 性 。 


在 页 面 中 执行 的 大 多 数 操作 都 需要 依赖 某 些 数据 来 完成 。 页 面 调用 一 个 发 送 消 息 的 函数 
时 ， 可 能 需要 消息 的 文本 。 一 个 为 帖子 点 赞 的 函数 可 能 需要 帖子 的 D。 但 是 ， 当 我 们 注册 
sync 事件 时 ， 唯 一 能 传递 给 它 的 是 事件 名 称 。 换 句 话 说， 你 可 以 告诉 service worker 在 后 
台 发 送 消 息 ， 但 是 将 消息 文本 传递 给 它 并 不 像 传 递 国 数 参数 那样 简单 。 

有 很 多 方法 可 以 解决 这 个 问题 。 请 允许 我 提出 三 种 不 同 的 方式 。 


7.3.1 在 IndexedDB 中 维护 操作 队列 


实现 这 一 点 的 理想 方法 ， 或 许 是 在 触发 后 台 同 步 操作 之 前 ， 先 让 页 面 把 用 户 操作 的 实体 
(例如 消息 、 预 订 等 ) 保存 在 IndexedDB 中 。 随 后 ， 在 service worker 中 的 sync 事件 代码 可 
以 迁 代 对 象 存储 ， 并 在 每 个 条 目 上 执行 所 需 的 操作 。 一 旦 操作 成 功 完成 ， 该 实体 就 可 以 从 
对 象 存储 中 删除 。 


回 到 我 们 的 消息 应 用 中 ， 这 种 方法 需要 我 们 把 每 一 条 新 消息 添加 到 message-queue 对 象 存 
储 中 ， 然 后 注册 一 个 send-messages 后 台 同 步 事 件 来 处 理 它们 。 这 个 事件 会 遍历 message- 
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queue 中 的 所 有 消息 ， 逐 一 将 它们 发 送 到 网 络 ， 并 最 终 从 消息 队列 中 删除 。 只 有 当 所 有 消 
息 都 发 送 成 功 ， 对 象 存储 为 空 ，sync 事件 才 会 成 功 完成 。 如 果 有 一 条 消息 发 送 失败 ， 就 会 














向 sync 事件 返回 一 个 拒绝 的 promise，SyncManager 将 会 在 稍 后 再 次 运行 sync 事件 。 

















你 可 能 希望 为 不 同 队列 维护 单独 的 对 象 存储 〈 例 如 ， 一 个 用 于 消息 发 出 ， 另 一 个 用 于 帖子 
) 


点 赞 ) ， 并 使 用 不 同 的 sync 事件 来 处 理 它们 。 
使 用 这 种 方式 ， 我 们 可 以 将 以 下 的 代码 : 


var sendMessage = function(subject, message) { 
fetch("/new-message", { 
method: "post", 
body: JSON.stringify({ 
subj: subject, 
msg: message 
}) 
]); 
}; 


禁 换 成 这 样 : 


var triggerMessageQueueUpdate = function() { 
navigator .serviceWorker .ready.then(function(registration) { 
registration.sync.register("message-queue-sync"); 
}); 
}; 











var sendMessage = function(subject, message) { 
addToObjectStore("message-queue", { 
subj: subject, 
msg: message 
}); 
triggerMessageQueueUpdate(); 
}; 


然后 ， 在 service worker 中 添加 下 列 代 码 : 


self.addEventListener("sync", function(event) { 
if (event.tag === "message-queue-sync") { 
event.waitUntil(function() { 
return getAllMessages().then(function(messages) { 
return Promise.all( 
messages.map(function(message) { 
return fetch("/new-message", { 
method: "post", 
body: JSON.stringify({ 
subj: subject, 
msg: message 
}) 
}).then(function() { 
return deleteMessageFromQueue(message); // 返回 promise 
]); 
}) 
); 
3 








使 用 后 合同 步 保 证 离线 功能 


115 


]); 
} 

]); 
我 们 的 事件 监听 器 监听 了 一 个 名 为 message-queue-sync 的 sync 事件 ， 然 后 使 用 getALL- 
Messages() 获取 IndexedDB 的 消息 队列 中 的 所 有 消息 ， 并 最 终 返 回 一 个 promise 给 sync 事 
件 ， 只 有 在 其 中 的 所 有 promise 都 完成 时 ， 这 个 promise 才 会 完成 。 这 个 promise 的 创建 是 
通过 传递 promise 数组 给 Promise.all 来 完成 的 。 我 们 在 消息 数组 上 运行 map() 方法 并 为 每 
条 消息 返回 一 个 promise， 以 此 创建 了 这 个 promise 数组 (这 项 技术 在 4.5 节 中 做 了 解释 )。 
只 有 在 消息 成 功 发 送 并 从 队列 中 删除 之 后 ， 这 些 promise 才 会 完成 。 随 后 ， 在 7.4 节 中 ， 
我 们 将 会 更 详细 地 查看 一 个 类 似 的 例子 。 


你 也 可 以 尝试 一 种 稍微 不 同 的 方法 一 一 在 一 个 对 象 存储 中 ， 同 时 存储 队列 对 象 和 已 经 同步 
成 功 的 对 象 。 在 使 用 这 种 技术 时 ， 你 还 需要 保存 每 个 对 象 的 状态 ， 并 在 对 象 同步 成 功 时 更 
新 该 状态 。 例 如 ， 你 可 以 将 应 用 所 有 的 已 发 送 和 未 发 送 消 息 存储 在 同一 个 对 象 存 储 中 。 每 个 
消息 对 象 除了 包含 消息 内 容 ， 还 会 包含 当前 的 状态 ， 例 如 sent (已 发 送 ) 或 者 pending ( 待 发 
送 )。 随 后 ， 同 步 操作 可 以 打开 游标 ， 遍 历 所 有 处 于 pending 状态 的 消息 ， 发 送 它们 ， 然 后 将 
其 状态 改 为 sent。 在 本 章 的 后 面 ， 我 们 会 使 用 这 种 方法 来 管理 哥 谭 帝 国 酒店 的 预订 。 


7.3.2 在 IndexedDB 中 维护 请 求 队列 


有 时 候 ， 当 你 处 理 一 个 现 有 项 目 时 ， 可 能 要 修改 应 用 架构 来 实现 在 本 地 存储 对 象 并 跟踪 对 
象 状态 时 ， 其 成 本 很 高 ， 难 以 承受 。 有 一 种 方法 可 以 快速 将 后 台 同 步 引 入 到 项 目 中 ， 就 是 
用 请 求 队列 替换 现 有 的 Ajax 调用 。 


使 用 这 种 方式 ， 你 要 将 每 个 网 络 请 求 奉 换 成 一 个 将 请 求 详情 存储 到 IndexedDB 的 方法 ， 随 
后 这 个 方法 会 注册 一 个 sync 事件 ， 这 个 事件 会 遍历 对 象 存 储 中 的 所 有 请 求 ， 并 逐个 运行 。 


与 前 面 的 方法 相反 ， 我 们 的 sync 事件 要 在 IndexedDB 中 存储 复制 每 个 网 络 请 求 所 需 的 所 
有 细节 。 同 步 代 码 不 需要 理解 网 站 每 个 操作 的 意图 ， 只 需要 育 目 地 返 代 列表 中 的 请 求 ， 并 
执行 它们 。 

使 用 这 种 方式 ， 我 们 可 以 将 以 下 的 代码 : 


var sendMessage = function(subject, message) { 
fetch("/new-message", { 
method: "post", 
body: JSON.stringify({ 
subj: subject， 
msg: message 
}) 
}); 
}; 









































































































































var LikePost = function(postId) { 
fetch("/like-post?id="+postId); 


替换 成 这 样 





= function() { 
navigator .serviceWorker .ready.then(function(registration) { 


var triggerRequestQueueSync = 
registration.sync.register("request-queue"); 


}); 
function(subject, message) { 


var sendMessage 
addToObjectStore("request-queue", { 


url: "/new-message", 


method: "post", 
body: JSON.stringify({ 


subj: subject, 
msg: message 
}) 
}); 
triggerRequestQueueSync(); 


}; 


var likepPost = function(postId) { 


addToObjectStore("request-queue", { 
url: "/like-post?id="+postId, 


method: "get" 
}); 
triggerRequestQueueSync(); 
}; 
我 们 将 所 有 的 网 络 请 求 殖 换 为 这 样 的 代码 : 将 代表 请 求 的 对 象 存储 到 名 为 request-queue 
的 对 象 存 储 中 。 这 个 存储 中 的 每 个 对 象 都 代表 着 一 个 网 络 请 求 ， 其 中 包含 了 需要 复制 的 每 
监听 器 到 service worker 中 ， 它 负责 遍历 





























荐 伯 


一 条 信息 。 接 下 来 ， 我 们 可 以 添加 一 个 sync 习 
request-queue 的 所 有 请 求 ， 逐 一 发 起 网 络 请 求 ， 然 后 从 对 象 存 储 中 将 其 删除 : 





self.addEventListener("sync", function(event) { 
if (event.tag === "request-queue") { 
event.waitUntil(function() { 
return getAllObjectsFrom("request-queue").then(function(requests) { 
return Promise.all( 
requests.map(function(req) { 
return fetch(req.url, { 
method: req.method, 
body: req.body 
}).then(function() { 
return deLeteRequestFromQueue(message); // 返回 一 个 promise 





}93 


}); 
} 
}); 
已 完成 的 请 求 会 从 IndexedDB 队列 中 删除 (使 用 deLeteRequestFromQueue()) 。 失 败 的 
请 求 会 保留 在 队列 中 ， 并 返回 拒绝 的 promise。 如 果 有 一 个 或 者 多 个 请 求 返 回 了 失败 的 
和 件 中 再 次 迭代 (这 一 次 不 会 再 包含 已 经 成 功 








hull 
中 








promise， 那 么 请 求 队列 将 会 在 下 一 次 sync 
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发 起 的 请 求 )。 
要 了 解 从 对 象 存 储 中 获取 对 象 的 示例 函数 实现 ， 以 及 其 他 的 mdexedDB 代码 ， 请 参见 第 6 章 。 


7.3.3 ”传递 数据 给 sync 事 件 标 签 


当 你 只 需要 传递 一 个 简单 的 值 给 sync 函数 时 ， 实 现 一 个 数据 库 来 跟踪 每 一 个 操作 ， 有 了 时 
候 看 起 来 是 杀 鸡 用 牛刀 。 接 下 来 介绍 的 技巧 肯定 看 起 来 有 点 不 完善 ， 但 是 有 时 候 你 要 寻找 
的 ， 正 是 一 种 快速 上 手 的 解决 方案 。 


假设 你 的 页 面 允 许 用 户 “ 点 赞 ” 某 个 帖子 ， 要 进行 一 个 只 需要 把 帖子 ID 发 送 到 某 个 URL 
的 动作 。 你 的 现 有 代码 可 能 是 这 样 : 
var LikePost = function(postId) { 


fetch("/like-post?id="+postId); 
}; 


正如 我 们 以 前 看 到 的 那样 ， 你 可 以 将 这 段 代 码 替换 成 一 个 IndexedDB 队列 ， 其 中 包含 了 需 
要 点 赞 的 帖子 ， 然 后 遍历 这 些 帖 子 。 但 有 时 候 ， 让 事情 保持 简单 是 有 价值 的 。 用 下 列 代 码 
来 替换 LikePost 函数 可 以 取得 类 似 的 效果 ， 而 不 需要 维护 一 个 帖子 的 数据 库 : 
var LikePost = function(postId) { 
navigator .serviceWorker .ready.then(function(registration) { 
registration.sync.register("like-post-"+post1Id); 
}); 
}; 
我 们 的 sync 事件 代码 也 能 做 到 如 此 简单 ， 简 单 地 判断 事件 名 称 是 否 以 like-post- 开头 ， 
然后 从 中 提取 帖子 的 ID ; 
self.addEventListener("sync", function(event) { 
if (event.tag.startsWith("like-post-")) { 
event.waitUntil(function() { 
var postId = event.tag.slice(10); 
return fetch("/like-post?id="+postId); 
]); 


} 
}); 


7.4 给 应 用 添加 后 人 台 同 步 


现在 ， 我 们 已 经 对 后 台 同 步 有 了 基本 的 了 解 ， 是 时 候 动手 用 它 来 改进 哥 谭 帝国 酒店 的 Web 
应 用 了 。 


My Account 页 面 顶部 是 一 个 可 以 让 用 户 发 起 新 预订 的 表单 。 当 用 户 提 交 这 个 表单 时 ，my- 
account.js 中 的 addReservation() 函数 会 被 调用 。 这 个 函数 会 从 表单 输入 中 创建 一 个 新 
的 reservationDetails 对 象 ， 并 给 它 设 置 一 个 Awaiting confirmation ( 待 确认 ) 状态 。 随 
后 ， 将 这 个 对 象 添加 到 IndexedDB 的 reservations 对 象 存 储 中 ， 泻 染 到 DOM 中 ， 并 最 终 
向 服务 器 发 起 Ajax 请 求 ， 向 酒店 发 起 预订 。 
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但 是 ,假设 网 络 永 远 可 用 就 是 自 找 麻烦 。 我 们 在 本 地 机 器 上 测试 时 可 能 一 切 正 常 ， 但 是 如 
果 用 户 试图 在 丢失 连接 的 情况 下 发 起 预订 ， 那 么 这 段 逻 辑 就 会 失败 。 如 果 在 用 户 离线 时 调 
用 了 addReservation()， 那 么 新 的 预订 会 写 入 IndexedDB 并 演 染 到 页 面 ， 但 是 Ajax 请 求 会 
失败 ， 服 务 器 不 知道 发 起 了 新 的 请 求 。 预 订 会 出 现在 页 面 上 ， 并 保存 在 IndexedDB 中 ， 甚 
至 在 用 户 刷新 浏览 器 后 也 会 保留 在 那里 。 无 论 用 户 如 何 操作 ， 他 都 会 看 到 预订 无 限期 地 处 
于 Awaiting confirmation 状态 ， 而 且 服 务 器 是 完全 不 知情 的 。 用 户 会 因此 感到 无 比 诅 走 ， 
也 严重 损害 了 酒店 股东 的 利益 。 


我 们 可 以 通过 将 创建 新 预订 的 请 求 ， 从 页 面 搬 到 service worker 中 的 sync 事件 ， 来 解决 这 

个 问题 。 

以 下 是 我 们 需要 完成 的 步骤 。 

(1) 修改 addReservation() 函数 ， 检 查 浏 览 器 是 否 支持 后 人 台 同 步 。 如 果 支 持 ， 则 注册 一 个 
sync-reservations 同步 事件 。 否 则 就 和 之 前 一 样 ， 使 用 常规 的 Ajax 调用 。 

(2) 添 加 新 预订 到 IndexedDB 中 的 代码 ， 需 要 把 新 预订 的 状态 改 为 Sending (发 送 中 )。 在 
预订 成 功 添加 到 服务 器 之 前 ， 这 就 是 用 户 看 到 的 状态 ， 添 加 成 功 后 ， 服 务 器 会 返回 新 的 
状态 (Awaiting confirmation 或 者 是 Confirmed ) 。 

(3) 我 们 会 向 service worker 添加 一 个 事件 监听 器 ， 用 来 响应 sync 事件 。 如 果 检 测 到 的 sync 

事件 名 称 是 sync-reservations， 事 件 监听 器 就 会 遍历 每 一 个 处 于 Sending 状态 的 预订 ， 

F 尝 试 将 其 发 送 到 服务 嚣 。 成 功 添加 到 服务 器 之 后 ，IndexedDB 中 的 预订 会 被 修改 为 新 

的 状态 。 如 果 任 何 服务 器 请 求 失败 ， 整 个 sync 事件 就 会 被 拒绝 ， 浏 览 器 会 尝试 在 随后 

再 次 运行 这 个 事件 。 

首先 ， 我 们 要 修改 addReservation()， 用 来 检查 后 台 同 步 是 否 在 当前 浏览 器 中 可 用 。 如 果 

是 的 话 ， 就 会 注册 一 个 sync 事件 ， 而 不 是 直接 调用 服务 器 。 


但 是 在 开始 之 前 ， 要 在 命令 行 中 运行 下 列 命 令 ， 确 保 代码 处 于 上 一 章 结束 时 的 状态 : 


git reset --hard 
git checkout ch07-start 


接 下 来 ， 在 my-accountjs 中 ， 按 照 以 下 示例 修改 addReservation() 的 代码 : 


var addReservation = function(id, arrivalDate, nights, guests) { 
var reservationDetails = { 
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id: id, 
arrivalDate: arrivalDate, 
nights: nights, 
guests: guests, 
status: "Sending" 

js 


addToObjectStore("reservations", reservationDetails); 
renderReservation(reservationDetails); 
if ("serviceWorker" in navigator && "SyncManager" in window) { 
navigator .serviceWorker .ready.then(function(registration) { 
registration.sync.register("sync-reservations"); 
}); 
} else { 
$.getJSON("/make-reservation", reservationDetails, function(data) { 
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updateReservationDisplay(data); 
]); 
} 
}3 


我 们 首先 把 addReservation() 函数 创建 reservationDetails 对 象 的 状态 从 Awaiting 
confirmation 改 成 了 Sending。 随 后 ， 检 查 当 前 浏览 器 是 否 同 时 支持 ServiceWorker 和 
SyncManager。 如 果 支 持 ， 我 们 就 广 册 一 个 sync-reservations 同步 事件 。 否 则 ， 就 和 以 前 
一 样 ， 使 用 $.getJsON 在 页 面 上 进行 预订 。 


在 为 这 个 事件 创建 事件 监听 器 之 前 ， 我 们 先 对 reservations-store.js 文件 做 出 两 处 小 改进 。 
这 些 改进 可 以 让 我 们 轻松 获取 到 sending 状态 的 预订 。 


首先 ， 我们 在 reservations 存储 中 ， 给 status 字段 添加 一 个 新 的 索引 。 


在 reservations-storejs 中 ， 将 第 一 行 的 DB_VERSION 从 1 改 为 2 (如 果 你 创建 了 更 多 版 本 ， 则 改 成 
更 高 的 版 本 )。 接 下 来 ， 在 同一 个 文件 里 ， 修 改 openDatabase() 函数 中 的 onupgradeneeded 
函数 ， 为 reservations 对 象 存储 中 的 status 字段 创建 索引 。 代 码 如 下 所 示 : 


request.onupgradeneeded = function(event) { 

var db = event.target.result; 
var UpgradeTransaction = event.target.transaction; 
var reservationsStore; 
if (!db.objectStoreNames.contains("reservations")) { 

reservationsStore = db.createObjectStore("reservations", 

{ keyPath: "id" } 
); 
} else { 
reservationsStore = uypgradeTransaction.objectStore("reservations"); 


} 






































if (!reservationsStore.indexNames.contains("idx_status")) { 
reservationsStore.createIndex("idx_status", "status", { unique: false }); 
} 
}; 
这 段 代 码 中 演示 了 一 些 我 们 还 没 接触 过 的 内 容 。 在 第 6 章 中 ， 我 们 只 看 到 了 如 何在 新 的 对 
象 存储 上 创建 索引 。 这 一 次 ， 由 于 对 象 存储 中 可 能 已 经 存在 了 一 些 用 户 数据 ， 我 们 需要 将 
索引 添加 到 现 有 的 对 象 存储 中 ， 或 者 是 创建 新 的 对 象 存储 并 添加 索引 。 


我 们 的 代码 仍然 遵循 了 6.2.5 节 中 的 版 本 管理 模式 ， 它 主张 在 每 次 进行 修改 之 前 ， 先 确认 
修改 是 否 有 必要 。 在 创建 reservations 对 象 存储 之 前 ， 我 们 先 判断 它 是 否 存 在 。 如 果 不 存 
在 ， 我 们 就 进行 创建 ， 并 将 引用 保存 到 reservationsStore 变量 中 。 如 果 已 经 存在 ， 我 们 


就 通过 调用 event.target.transaction.objectStore("reservations") 获得 更 新 事件 中 的 事 
务 ， 并 从 事务 中 获取 reservations 对 象 存储 的 引用 。 


最 后 ， 当 我 们 确认 reservations 对 象 存储 已 经 存在 时 (要么 在 前 一 个 版 本 中 已 经 创建 ， 要 
么 是 因为 刚才 已 经 创建 )， 就 可 以 检查 对 象 存储 的 indexNames 属性 ， 判 断 其 是 否 已 经 包含 
了 我 们 需要 的 索引 。 如 果 没 有 包含 ， 我 们 就 继续 创建 它 。 


在 reservations-store.js 中 的 最 后 一 处 修改 ， 让 我 们 可 以 使 用 这 个 新 的 索引 ， 轻 松 获 取 到 处 
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于 某 个 状态 的 所 有 预订 。 要 做 到 这 一 点 ， 我 们 要 改进 getReservations 函数 ， 
收 两 个 可 选 的 参数 : 索引 名 称 ， 以 及 传递 给 该 索引 的 值 。 


在 reservations-store.js 中 修改 getReservations() 函数 ， 如 下 所 示 : 

















var getReservations = function(indexName, indexValue) { 
return new Promise(function(resolve) { 
openDatabase().then(function(db) { 
var objectStore = openObjectStore(db, "reservations"); 
var reservations = []; 
var cursor; 
if (indexName && indexValue) { 
cursor = objectStore.index(indexName).openCursor(indexValue); 
} else { 
cursor = objectStore.openCursor(); 
} 
cursor .onsuccess = function(event) { 
var cursor = event.target.result; 
if (cursor) { 
reservations.push(cursor .value); 
cursor .continue(); 
} else{ 
if (reservations.length > 0) { 
resolve(reservations); 
} else { 
getReservationsFromServer().then(function(reservations) { 
openDatabase().then(function(db) { 
var objectStore = 
openObjectStore(db, "reservations", "readwrite"); 
for (var i = 0; i < reservations.length; i++) { 
objectStore.add(reservations[i]); 
} 
resolve(reservations); 
]); 
]); 
} 
} 
}; 
}).catch(function() { 
getReservationsFromServer().then(function(reservations) { 
resolve(reservations); 
}); 
]); 
]); 
}; 


让 其 支持 接 


新 的 函数 包含 了 两 处 修改 。 首 先 ， 它 允许 getReservations() 接收 两 个 可 选 参 数 (indexName 
和 indexValue)。 其 次 ， 如 果 函 数 接收 了 这 些 参数 ， 就 使 用 参数 在 特定 索引 (indexName) 上 









































打开 游标 ， 而 不 是 直接 打开 对 象 存储 。 随 后 打开 特定 值 (indexvalue) 的 游标 ,会 把 结果 限 
制 指定 的 范围 内 。 如 果 没 有 传递 这 些 参 数 ， 它 将 会 像 以 前 那样 运行 ， 并 返回 所 有 的 预订 。 


做 出 这 两 处 修改 后 ， 我 们 的 国 数 可 以 返回 所 有 结果 ， 也 可 以 仅 返回 结果 的 一 个 子 集 ， 如 下 























所 示 : 
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getReservations().then(function(reservations) { 
// reservations 变 量 包 含 了 所 有 预订 
]); 


getReservations("idx_status", "Sending").then(function(reservations) { 
// reservations 变 量 仅 包含 了 状态 为 "Sending" 的 预订 
]); 


现在 ， 一 切 已 经 准备 好 ， 可 以 在 service worker 中 处 理 未 发 送 的 预订 了 。 我 们 可 以 继续 添 
加 后 台 同 步 的 事件 监听 器 到 service worker 中 。 


首先 ， 要 确保 在 serviceworkerjs 的 第 一 行 引 入 reservations-store.js 文件 。 代 码 应 该 如 下 所 示 : 


importScripts("/js/reservations-store.js"); 


接 下 来 ， 在 serviceworker.js 的 底部 ， 添 加 下 列 代码 : 


var createReservationUrl = function(reservationDetails) { 
var reservationUrl = new URL("http://Llocalhost:8443/make-reservation"); 
Object.keys(reservationDetails).forEach(function(key) { 
reservationUrl.searchparams.append(key, reservationDetails[key]); 
}); 
return reservationUrl; 


}; 




















var syncReservations = function() { 
return getReservations("idx_status", "Sending").then(function(reservations) { 
return Promise.all( 
reservations.map(function(reservation) { 
var reservationUrl = createReservationUrl(reservation); 
return fetch(reservationUrl); 
}) 
); 
]); 
}; 


self.addEventListener("sync", function(event) { 
if (event.tag === "sync-reservations") { 
event .waitUntil(syncReservations()); 
} 
]); 


在 深入 研究 createReservationUrL() 和 syncReservations() 的 细节 之 前 ， 我 们 先 来 看 看 这 
股 新 代码 的 最 后 一 部 分 。 我 们 使 用 self.addEventListener 为 sync 事件 添加 了 一 个 新 的 事 
件 监 听 器 。 这 个 事件 监听 器 会 响应 标签 为 sync-reservations 的 事件 ， 让 其 waituntil 等 
待 syncReservations() 返回 的 promise， 根 据 这 个 promise 完成 或 者 拒绝 来 判断 sync 事件 
是 完成 还 是 拒绝 。 如 果 syncReservations() 返回 的 promise 完成 ， 那 么 sync-reservations 
sync 事件 就 会 从 SyncManager 中 删除 (直到 我 们 再 一 次 注册 它 )。 如 果 promise 拒绝 ， 那 么 
SyncManager 会 保持 sync 事件 的 注册 ， 并 在 随后 再 次 触发 该 事件 。 

通过 syncReservations() 创建 的 能 够 决定 整个 sync 事件 结果 的 promise 是 什么 ? 广义 地 
说 ，syncReservations() oO 区 IndexedDB 中 每 一 个 被 标记 为 Sending 状态 的 预订 ， 

将 其 发 送 到 服务 器 ， 并 返回 一 个 promise， 只 有 当 每 一 个 预订 都 发 送 成 功 时 ， 这 个 promise 
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才 会 解决 。 如 果 一 个 预订 失败 了 ， 那 么 syncReservations() 返回 的 整个 promise 就 会 失败 。 


为 了 实现 这 一 点 ，syncReservations() 首先 使 用 getReservations() 图 数 ， 获 取 了 所 有 处 于 
Sending 状态 的 预订 。getReservations() 函数 返回 了 一 个 promise， 其 中 包含 了 所 有 需要 发 
送 的 预订 。 随 后 ， 我 们 使 用 Promise.all() 将 所 有 单独 的 promise 包 襄 起 来 ， 并 返回 一 个 单 
独 的 promise， 这 个 promise 会 决定 整个 syncReservations() 函数 的 结果 。 


要 做 到 这 一 点 ， 我 们 需要 给 Promise.all() 传人 一 个 promise 数组 。 我 们 拿 到 预订 对 象 的 
数组 后 ， 通 过 使 用 Array.map() 方法 将 数组 元 素 转换 为 promise， 从 而 创建 出 这 个 数组 。 我 
们 使 用 map() 对 每 个 预订 进行 迭代 ， 创 建 一 个 fetch 请 求 发 送 到 服务 器 来 创建 这 个 预订 。 
fetch() 会 返回 一 个 promise， 这 个 promise 正 是 我 们 要 返回 并 放 入 promise 数组 中 ， 并 传 
递 给 Promise.all() 的 。 


关于 如 何 使 用 Promise.all() 和 Array.map() 创建 一 个 promise 数组 ， 请 参见 4.5 节 中 的 
“为 Promise.all0 创建 一 个 promise 数组 ”。 


最 后 我 们 来 看 createReservationUrl() 函数 。 这 个 函数 使 用 URL 接口 创建 了 一 个 新 的 URL 
对 象 ， 这 个 对 象 表 示 了 fetch 请 求 要 发 往 的 Web 地址 。 这 个 代码 仅仅 是 用 一 种 更 优雅 的 方 
式 来 创建 带 有 查询 字符 串 的 URL， 而 不 是 手工 拼接 字符 串 、 值 、& 符号 和 问号 。 这 个 函数 
接收 的 对 象 包括 了 预订 的 详情 ， 并 返回 一 个 URL 对 象 ， 其 中 包含 了 查询 字符 串 的 详情 : 

console. log( 

createReservationUrl({nights: 2, guests: 4}); 

); 

// 返回 一 个 新 的 URL 对 象 ， 指 向 的 地 址 是 

// http://localhost:8443/make-reservation?nights=2&guests=4 
完成 上 述 所 有 修改 后 ， 可 以 再 次 访问 My Account 页 面 。 这 一 次 ， 一旦 页 面 加 载 ， 模 拟 离 
线 状态 (使 用 浏览 器 的 开发 者 工具 ， 或 者 停止 开发 服务 器 )， 并 尝试 发 起 新 的 预订 。 预 订 
会 被 添加 到 IndexedDB 和 DOM 中 ，sync 事件 会 注册 ,但 是 服务 器 是 无 法 到 达 的 。 预 订 依 
然 会 停留 在 Sending 状态 ， 如 图 7-3 所 示 。 接 下 来 ， 将 服务 器 的 连接 恢复 ， 在 儿 分 钟 内 ， 
sync 事件 会 重新 发 送 ， 预 订 会 被 修改 为 Confirmed 状态 。 





























BY https/www.gothamimperial.com/my-account 


Gotham Imperial Hotel & 
imperial Plaza, Gotham. Total prics 
Check-in: October 10th 2016, §456.99 


2nights. 1 guests. 


Modify booking details Confirmed 
Order number 80053198 CBooked on: September 15th 2016 


Gotham Imperial Hotel 


1 Imperial Plaza, Gotham. Total price 
Check-in: 2022-11-05. ? 


3nights.2 guests. 


Modify booking detalls 
Order number: 44658974 é Booked on: n/a 
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如 果 你 恢复 连接 后 ， 一 直 在 等 待 sync 事件 运行 ， 并 开始 怀疑 它 是 否 已 经 运 
行 ， 可 以 在 浏览 器 控制 台中 运行 以 下 代码 : 
navigator .serviceWorker .ready.then(function(registration) { 
registration.sync.getTags().then(function(tags) { 
console.log(tags); 
]); 
]); 


这 段 代 码 会 输出 当前 已 注册 sync 事件 的 完整 列表 。 如 果 预 订 sync 事件 依然 
在 注册 ， 那 么 代码 应 该 会 把 ["sync-reservations"] 打印 到 控制 台中 。 









































后 台 同 步 最 令 人 印象 深刻 的 是 ， 即 使 关闭 哥 谭 帝国 酒店 网 站 后 ，sync 事件 也 依然 会 到 达 服 
务 器 。SyncManager 会 跟踪 所 有 等 待 中 的 sync 注册 ， 并 不 知 疫 倦 地 确保 事情 可 以 在 后 台 完 
成 。 如 果 没 有 service worker 一 一 一 个 即使 在 用 户 关闭 你 的 渐进 式 Web 应 用 之 后 还 能 进行 
响应 的 脚本 ， 这 是 不 可 能 实现 的 。 


这 引出 了 sync 事件 中 缺少 的 最 后 一 个 步骤 。 当 sync 事件 成 功 创建 预订 之 后 ，fetch 请 求 会 

返回 一 个 新 的 预订 详情 对 象 ， 其 中 包含 了 新 的 细节 ， 包 括 预 订 的 最 终 价 格 ， 以 及 更 新 后 的 

预订 状态 。 我 们 需要 更 新 mdexedDB 中 的 预订 详情 ， 以 便 显 示 最 新 的 信息 给 用 户 。 更 重要 

的 是 ， 我 们 需 要 更 新 预订 状态 ， 以 便 在 下 一 次 sync-reservations 事件 注册 的 时 候 ， 预 订 
` 会 被 重复 发 送 


在 serviceworker.js 中 更 新 syncReservations() 函数 ， 如 下 所 示 : 

















var syncReservations = function() { 
return getReservations("idx_status", "Sending").then(function(reservations) { 
return Promise.all( 
reservations.map(function(reservation) { 
var reservationUrl = createReservationUrl(reservation); 
return fetch(reservationUrl).then(function(response) { 
return response.json(); 
}).then(function(newReservation) { 
return updateInObjectStore( 
"reservations", 
newReservation.id, 
newReservation 


syncReservations() 最 新 版 本 的 唯一 变化 ， 是 当 fetch() 完成 时 ， 我 们 不 再 立即 认为 
promise 完成 。 现 在 ， 5 fetch 返回 的 promise 完成 时 ，then 中 的 新 函数 会 被 调用 ， 其 中 包 
含 了 fetch 的 响应 。 这 个 对 象 中 包含 了 JSON， 是 我 们 通过 调用 response.json() 解析 得 到 
的 。 这 会 返回 一 个 promise， 其 中 包含 了 预订 详情 的 简单 JavaScript 对 象 ， 我 们 在 then 中 ， 
将 这 个 对 和 象 传递 给 updateIn0bjectsStore() 函数 。 
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现在 ， 即 使 在 离线 时 进行 预订 的 用 户 ， 也 会 在 他 们 的 本 地 IndexedDB 对 象 存储 中 获得 最 间 











预订 数据 。 即 使 sync 事件 在 用 户 离开 网 站 之 后 成 功 发 起 预订 ， 我 们 也 能 确保 IndexedDB 
对 象 存储 中 的 数据 能 够 保持 最 新 。 


aks 








第 二 个 
的 结果 来 修改 页 
赞 ”)。 由 于 service worker 不 能 直接 访问 页 再 


的 结果 从 service worker 返 


小 结 
































在 现代 渐进 式 Web 应 用 中 ， 后 台 同 步 有 潜力 成 为 其 中 一 个 最 重要 的 组 成 部 分 。 这 是 其 中 一 
项 对 用 户 体验 至 关 重 要 的 技术 ， 但 是 它 对 用 户 是 不 可 见 的 


当 你 着 手 将 后 台 同 步 添 加 到 自己 的 应 用 中 时 ， 可 能 会 遇 到 两 项 主要 的 挑战 。 

首先 要 将 逻辑 (连同 运行 所 需 的 所 有 数据 ) 从 页 面 移动 到 service worker 中 。 这 是 本 章 所 
解决 的 问题 。 
问题 是 将 后 台 同 步 事件 的 结果 传递 回 页 面 和 用 户 。 你 经 常 需要 基于 后 台 同 步 操作 
重 ( 例 如 ， 可 视 化 地 将 消息 标记 为 “已 发 送 ”， 或 者 将 帖子 标记 为 “已 点 








直到 它 停止 工作 为 止 。 














i 窗口 ， 所 以 我 们 需要 一 种 方法 来 将 这 些 操作 








和 页 面 之 间 传 递 消息 来 实现 这 一 点 。 


但 是 这 又 绰 


呢 ? 我 们 如 何 让 月 








回 到 页 面 。 在 第 8 章 中 ， 我 们 将 探讨 如 何 通过 在 service worker 





HH 了 另 一 项 有 意思 的 挑战 。 如 果 sync 事件 成 功 发 生 时 ， 用 户 已 经 离开 了 站 点 
有 户 知道 预订 已 经 接收 ?如 何在 稍 后 状态 改变 时 通知 用 户 ? 在 第 10 章 中 ， 


我 们 将 学 习 如 何 使 用 推送 通知 来 始终 让 用 户 了 解 最 新 状态 。 
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第 8 章 
使 用 postMessage() 在 Service 
worker 和 页 面 之 间 通 信 





当 我 们 把 越 来 越 多 的 逻辑 从 页 面 转移 到 service worker 之 后 ， 经 常会 发 现 需要 在 两 者 之 间 
进行 通信 。 

在 第 7 章 中 我 们 了 解 到 ， 将 诸如 网 络 请 求 之 类 的 重要 事件 从 不 稳定 的 页 面 移动 到 service 
worker 中 ， 可 使 应 用 更 加 可 靠 。 但 是 ， 我 们 经 常 需要 根据 这 些 操作 的 结果 更 新 页 面 。 例 
如 ， 在 7.4 节 中 ， 我 们 将 发 起 新 预订 的 代码 移动 到 了 运行 在 service worker 中 的 后 台 同 步 
事件 中 。 这 个 事件 调用 了 服务 器 ， 并 接收 了 一 个 JSON 文件 作为 响应 ， 其 中 包含 了 更 新 后 
的 预订 详情 。 我 们 使 用 JSON 文件 中 的 数据 ， 更 新 了 IndexedDB 中 的 预订 详情 ， 但 是 由 
于 service worker 不 能 访问 窗口 ， 我 们 不 能 将 预订 详情 更 新 到 DOM 中 。 取 而 代 之 的 是 ， 页 
下 依赖 于 一 个 朴素 的 setInterval() 方法 ， 每 隔 几 秒 通 过 网 络 检查 一 下 预订 状态 ， 并 更 区 
DOM。 如 果 sync 事件 可 以 在 接收 到 更 新 过 的 预订 详情 之 后 立刻 将 其 发 送 到 页 面 中 ， 我 们 
就 可 以 立刻 更 新 DOM， 而 不 需要 发 起 不 必要 的 网 络 请 求 了 。 


本 章 ， 我 们 将 看 看 如 何 使 用 postMessage() 在 页 面 和 service worker 之 间 来 回 发 送 消 息 和 数 
据 ， 并 探索 几 种 类 型 的 通信 : 

。 从 窗口 向 控制 它 的 service worker 发 送 消息 

。 从 service worker 向 作用 域内 的 所 有 窗口 发 送 消息 

。 从 service worker 问 特 定 窗口 发 送 消 息 

。 通过 service worker 在 窗口 之 间 发 送 消息 
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8.1 窗口 向 service worker 通 信 
从 页 面向 service worker 发 送 消 息 很 简单 。 
从 页 面 发 送 消息 之 前 ， 首 先 要 获取 当前 控制 页 面 的 service worker。 可 以 使 用 navigator. 


service Worker.controller 获取 这 个 service worker。 


接 下 来 ， 可 以 使 用 service worker 的 postMessage() 方法 ， 该 方法 接收 的 第 一 个 参数 就 是 消 
息 本 身 。 消 息 可 以 是 几乎 任何 值 ， 或 者 JavaScript 对 象 ， 包 括 字符 串 、 对 象 、 数 组 、 数 字 、 
布尔 类 型 等 。 


下 面 的 示例 展示 了 从 页 面向 service worker 发 送 一 条 包含 了 一 个 简单 对 象 的 消息 : 


navigator .serviceWorker .controller .postMessage( 
{arrival: "05/11/2022", nights: 3, guests: 2} 
) 


消息 一 旦 发 布 ，service worker 就 可 以 通过 监听 message 事件 来 捕获 它 : 


self.addEventListener("message", function (event) { 
console. log(event.data); 


}); 


本 例 中 的 代码 会 监听 传 入 的 消息 ， 并 将 消息 内 容 记 录 到 控制 台中 。 消 息 内 容 可 以 在 传递 给 
事件 监听 器 (event.data) 的 event 对 象 的 data 属性 中 找到 。 


除了 包含 消息 数据 本 身 之 外 ，event 对 象 还 包含 了 其 他 许多 有 用 的 属性 。 其 中 一 些 最 实用 
的 属性 在 source 属性 中 。source 包含 了 发 送 消 息 的 窗口 的 相关 信息 ， 可 以 帮助 我 们 决定 
该 做 什么 ， 以 及 向 哪里 发 送 消息 响应 。 以 下 是 message 事件 source 属性 的 一 些 示 例 用 法 : 
self.addEventListener("message", function (event) { 
console.log("Message received:", event.data); 


console.log("From a window with the id:", event.source.id); 
console.log("which is currently pointing at:", event.source.url); 
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console.log("and is", event.source.focused ? "focused" : "not focused"); 
console.log("and", event.source.visibilityState); 
]); 


让 我 们 看 一 个 向 service worker 发 送 消 息 的 可 能 用 例 。 
哥 谭 帝国 酒店 可 能 会 决定 对 其 Web 应 用 进行 扩展 ， 增 加 旅游 指南 ， 列 出 哥 谭 的 每 一 家 餐 
馆 。 由 于 哥 谭 有 数 以 千 计 的 餐馆 ， 我 们 可 能 觉得 缓存 每 一 家 餐馆 的 详情 会 大 多 了 。 我 们 可 
以 选择 只 缓存 用 户 查 看 过 的 餐馆 的 详情 。 
要 实现 这 一 点 ， 我 们 可 以 添加 代码 ， 从 餐馆 详情 页 面 发 送 消息 : 

navigator .serviceWorker .controller.postMessage("cache-current-page"); 
当 用 户 访问 一 家 餐馆 的 页 面 时 ， 会 有 一 条 消息 发 送 到 service worker。service worker 可 以 监 
听 这 些 消息 ， 并 使 用 事件 的 source 属性 ， 判 断 需 要 缓存 哪个 页 面 : 


self.addEventListener("message", function (event) { 
if (event.data === "cache-current-page") { 
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var sourceUrl = event.source.url; 





if (event.source.visibilityState === "visible") { 
// 立即 缓存 sourceUrL 和 相关 文件 
} else { 
// 将 sourceurL 和 相关 文件 添加 到 队列 中 ， 稍 后 缓存 
} 
} 
]); 





这 个 示例 中 的 代码 使 用 消息 的 源 URL 来 确定 需要 缓存 哪个 页 面 。 它 还 根据 页 面 的 当前 可 
见 状态 来 判断 应 首先 请 求 并 缓存 哪个 页 面 。 这 样 ， 如 果 用 户 在 许多 单独 的 标签 页 中 打开 了 
一 堆 餐 馆 ， 那 么 当前 可 见 标 签 中 的 内 容 就 会 被 先 缓存 。 在 11.4 市 中 我 们 将 会 看 到 如 何在 页 
面 被 缓存 之 后 更 新 页 面 及 其 UI， 让 用 户 知道 现在 页 面 已 经 缓存 并 且 离 线 可 用 。 


请 注意 ， 当 前 页 面 需要 有 一 个 控制 它 的 service worker， 否 则 调用 navigator. 
service Worker.controller.postMessage() 会 导致 报错 。 如 果 用 户 第 一 次 访问 
网 站 ， 可 能 会 安装 并 激活 新 的 service worker， 但 这 并 不 意味 着 它 正 在 控制 当前 
页 面 。 在 这 种 情况 下 ，navigator .serviceWorker.controller 会 是 undefined， 
然后 代码 会 中 断 ， 因 为 undefined 没有 包含 postMessage() 方法 。 在 第 4 章 中 ， 
你 可 以 读 到 更 多 关于 service worker 从 安装 到 激活 并 控制 页 面 的 相关 信息 。 
实际 上 ， 应 该 重 写 上 述 代 码 ， 在 尝试 使 用 service worker 之 前 ， 引 入 判断 
service worker 是 否 存 在 的 检查 : 


if ("serviceWorker" in navigator 
&& navigator.serviceWorker.controller) { 
navigator .serviceWorker .controller .postMessage( 
"cache-current-page" 
); 
} 


8.2 ”service worker 向 所 有 打开 的 窗口 通信 


从 service worker 向 页 面 发 送 消息 ， 类 似 于 从 页 面向 service worker 发 送 消 息 ， 唯 一 的 
区 别 是 在 哪个 对 象 上 调用 postMessage()。 目 前 为 止 ， 我 们 只 在 service worker 上 调用 过 
postMessage()， 这 次 我 们 将 在 service worker 的 客户 端 上 调用 它 。 


在 service worker 内 ， 我 们 可 以 使 用 service worker 的 全 局 对 象 中 的 clients 对 象 ， 获 取 service 
worker 作用 域内 所 有 当前 打开 的 窗口 (WindowClient) 。cLients 包含 了 一 个 matchAl1() 方 
法 ， 我 们 可 以 用 这 个 方法 获取 service worker 作用 域内 所 有 当前 打开 的 窗口 (客户 端 )。matchAl1() 
返回 一 个 promise， 在 完成 时 ， 返 回 一 个 包含 0 个 或 者 多 个 WindowClient 对 象 的 数组 : 
self.clients.matchAll().then(function(clients) { 
clients.forEach(function(client) { 


if (client.url.includes("/my-account")) { 
client.postMessage("Hi client: "+client.id); 
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这 段 代 码 获取 了 这 个 service worker 当前 控制 的 所 有 客户 端 ， 对 它们 进行 迭代 ， 并 向 当前 
显示 My Account 页 面 的 客户 端 发 送 消息 。 

在 页 面 中 监听 来 自 service worker 的 message 事件 ， 和 我 们 在 8.1 节 中 看 到 的 非常 类 似 。 但 
是 这 次 ， 我 们 要 将 事件 监听 器 添加 到 serviceWorker 对 象 中 : 


navigator .serviceWorker.addEventListener("message" ，function (event) { 
console. log(event.data); 
]); 
如 果 在 页 面 中 包含 了 这 段 代 码 ， 并 在 service worker 中 运行 了 之 前 的 代码 ， 当 前 指向 My 
Account 页 面 的 任何 页 面 都 会 把 消息 打印 到 控制 台中 ， 消 息 内 容 类 似 于 : 


Hi client: b85b7e3d-a893-4b67-9e41-1d6fddf40110 
























































仅仅 把 代码 放 在 service worker 的 顶部 是 不 够 的 。 如 果 代 码 放 置 在 事件 之 外 ， 

它 只 会 在 service worker 脚本 加 载 后 、service worker 安装 前 以 及 任何 客户 端 

监听 之 前 ， 执 行 一 次 。 相 反 ， 要 将 其 添加 到 事件 中 ， 如 下 面 的 代码 示例 所 

示 。 在 开发 期 间 ， 还 | 览 器 控制 台 ， 在 service worker 的 作用 域内 
运行 这 段 代 码 。 有 具体 请 参见 4.8.1 节 。 





















































让 我 们 来 看 看 这 类 通信 的 典型 用 例 。 


我 们 想 要 向 哥 谭 帝国 酒店 应 用 的 用 户 保 证 ， 无 论 他 们 在 线 还 是 离线 ， 都 可 以 使 用 这 款 应 
用 。 为 此 ， 我 们 可 以 在 service worker 安装 并 缓存 所 需 的 一 切 静 态 资 源 之 后 ， 立 即 向 用 户 
显示 一 条 消息 。 下 面 的 代码 示例 修改 了 install 事件 ， 在 缓存 完成 之 后 向 所 有 客户 端 发 送 消 
息 。 然后 ， 页 面 可 以 响应 这 个 事件 ， 向 用 户 显示 一 条 消息 ， 向 他 们 保证 这 款 应 用 在 离线 和 
在 线 状态 下 都 能 使 用 。 


self.addEventListener("install", function(event) { 
event .waitUntil( 

caches.open(CACHE_NAME).then(function(cache) { 
return Cache.addALL(CCACHED_URLS ) ; 

}).then(function() { 
return self.clients.matchAll({ includeUncontrolled: true }); 

}).then(function(clients) { 
clients.forEach(function(client) { 

client.postMessage("caching-complete"); 


}); 



































这 段 代 码 和 哥 谭 帝国 酒店 现 有 的 install 事件 状态 很 类 似 ， 只 添加 了 一 处 。 一 且 cache. 
addALL() 返回 的 promise 成 功 ， 我 们 就 使 用 clients 对 象 ， 获 取 当 前 打开 的 所 有 
WindowClient 对 象 ， 并 向 每 个 客户 端 发 送 一 条 消息 


发 送 消息 的 代码 基于 我 们 在 本 节 第 一 个 示例 中 看 到 的 相同 原则 ， 但 是 我 们 引入 了 一 处 重要 
的 变化 。 当 调用 cLients.matchALL() 时 ， 我 们 传人 了 一 个 选项 对 象 ， 让 其 包含 未 受 控 制 的 
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。 对 于 开发 者 来 说 ， 这 个 例子 也 体现 了 理解 service worker 生命 周期 的 重要 性 〈 正 
第 4 章 中 解释 的 那样 )。 Re 名 一 次 访问 页 面 时 ，service worker 会 安装 并 激活 。 然 而 ， 

Se worker 控制 。 如 果 我 们 没有 让 seLf.cLients.matchALL() 包括 未 

受 控 制 的 窗口 ， 我 们 的 消息 就 不 会 到 达 目 的 地 。 


在 第 11 章 中 ， 我 们 将 会 介绍 一 个 在 缓存 完成 时 通知 用 户 的 完整 例子 。 


8.3 service worker 向 特定 窗口 通信 


除了 matchALL() 方法 之 外 ，cLients 对 象 还 有 另 一 个 实用 的 方法 ， 让 你 可 以 通过 get() 

获取 单个 客户 端 对 象 。 通 过 传递 一 个 已 知客 户 端的 ID 给 get()， 我 们 就 可 以 得 到 一 个 

promise， 当 其 完成 时 会 得 到 WindowClient 对 象 。 之 后 我 们 就 可 以 使 用 这 个 对 象 ， 给 该 客 

户 端 发 送 消息 。 

举 个 例子 ， 如 果 我 们 知道 其 中 一 个 WindowClient 的 ID 是 d2069ced-8f96-4d28， 就 可 以 运 

行 下 面 的 代码 ， 让 窗口 知道 它 当前 是 否 可 见 : 
self.clients.get("d2069ced-8f96-4d28").then(function(client) { 


client.postMessage("Hi window, you are currently " + client.visibilityState); 


}); 


有 几 种 方式 可 以 找到 客户 端 窗 口 的 ID。 一 种 方式 是 在 使 用 cLients.matchALL() j 
开 的 客户 端 时 ， 通 过 WindowClient 对 象 的 id 属性 获取 。 另 一 种 可 能 的 方法 是 ， 通 过 post 
message 事件 的 source 属性 获取 。 这 两 种 方式 的 用 法 如 下 所 示 : 


self.clients.matchAll().then(function(clients) { 
clients.forEach(function(client) { 
self.clients.get(client.id).then(function(client) { 
client.postMessage("Messaging using clients.matchAll()"); 
]); 
}); 
]); 
































self.addEventListener("message", function(event) { 
self.clients.get(event.source.id).then(function(client) { 
client.postMessage("Messaging using clients.get(event.source.id)"); 
}); 
]); 


没 错 ， 这 两 个 示例 用 法 都 是 非常 多 余 的 。 在 这 两 个 例子 中 ， 我 们 使 用 客户 端 对 象 (在 第 一 
个 例子 中 是 client， 第 二 个 例子 中 是 event.source) 来 获取 其 ID ， 然 后 又 通过 ID 获取 对 
应 的 客户 端 对 象 。 这 两 个 例子 都 可 以 进行 简化 ， 以 避免 使 用 clients .get(): 


self.clients.matchAll().then(function(clients) { 
clients.forEach(function(client) { 
client.postMessage("Messaging using clients.matchAll()"); 
}); 
]); 

















self.addEventListener("message", function (event) { 





event .source.postMessage("Messaging using event.source"); 


}); 


一 种 更 有 可 能 使 用 clients.get() 的 场景 ， 是 把 客户 端 ID 存储 在 service worker 中 ， 以 便 
随后 使 用 cLients.get() 进行 访问 。 


举 个 例子 ， 设 想 一 个 应 用 是 用 来 跟踪 股票 市 场 的 。 这 个 应 用 使 用 一 个 数据 流 ， 许 多 不 同 股 
票 的 更 新 都 是 通过 这 个 数据 流 到 达 的 。 当 知道 用 户 倾向 于 打开 多 个 窗口 ， 每 个 窗口 显示 在 
不 同 的 屏幕 上 并 且 跟 踪 不 同 的 股票 时 ， 你 会 意识 到 你 不 得 不 在 所 有 打开 的 窗口 中 保持 同一 
个 数据 流 打 开 。 在 试图 优化 应 用 以 节省 带宽 和 服务 器 成 本 时 ， 你 决定 停止 在 每 个 单独 的 窗 
口中 打开 流 ， 而 是 在 service worker 中 打开 一 个 流 ， 处 理 所 有 的 股票 价格 变化 。 随 后 ， 每 
个 页 面 在 打开 时 ， 可 以 向 service worker 发 送 消息 ， 告 诉 service worker 它 想 要 订阅 哪 支 股 
票 的 更 新 。service worker 会 维护 一 份 列表 ， 甚 中 记录 了 每 个 客户 端 ID 想 要 更 新 哪 支 股票 。 
现在 ， 任 何 时 候 ， 只 要 关于 特定 股票 的 更 新 通过 流 到 达 ，service worker 都 可 以 获取 一 份 对 
该 股票 感 兴趣 的 客户 端 列表 ， 并 使 用 client.get() 给 每 个 客户 端 发 送 更 新 后 的 股票 信息 。 


8.4 使 用 MessageChannel 保 持 通信 渠道 打开 


目前 为 止 ， 我 们 只 看 到 了 如 果 使 用 WindowClient 或 者 service worker 对 象 发 送 销 息 ， 并 且 
只 看 到 了 postMessage() 接收 的 第 一 个 参数 。 但 实际 上 ，postMessage() 可 以 接收 第 二 个 参 
数 ， 你 可 以 使 用 这 个 参数 来 保持 双方 之 间 的 通信 渠道 打开 ， 来 回 发 送 消 息 。 

这 种 通信 是 通过 MessageChannel 对 象 处 理 的 。 

如 果 你 熟悉 这 个 实验 : 用 一 条 线 把 两 个 杯子 连接 起 来 ， 一 个 人 对 着 杯子 说 话 ， 另 一 个 人 通 
过 杯子 听 ， 那 么 你 就 已 经 熟悉 MessageChannel 的 工作 原理 了 。 

在 MessageChannel 中 ， 两 个 杯子 被 称 为 port1 和 port2 〈 见 图 8-1)。 你 可 以 通过 postMessage() 
对 着 每 个 杯子 (或 者 端口 ) 说 话 ， 并 且 可 以 使 用 事件 监听 器 监听 每 个 杯子 。 

























































































8-1: Throw new ClipartException('string not pulled taut); 
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var msgChan = new MessageChanneL(); msgChan.port1.onmessage = function(msg) { 
console.log("Message received at port 1:", msg.data); 
}; 
msgChan.port2.postMessage("Hi from port 2"); 
这 段 代 码 创 建 了 一 个 新 的 “杯子 电话 ”MessageChannel， 监 听 杯 子 port1， 并 且 对 着 另 一 
个 杯子 (port2) 说 话 。 在 浏览 器 中 运行 这 段 代码 ， 应 该 能 够 把 Message received at port 
1: Hi from port 2 打印 到 控制 台中 。 


当 我 们 从 窗口 向 service worker 通信 时 (反之 亦 然 )， 可 以 在 窗口 中 创建 一 个 新 的 
MessageChannel 对 象 ， 并 通过 postMessage 将 其 中 的 一 个 端口 传递 给 service worker。 当 消 
息 到 达 后 ， 就 可 以 在 service worker 中 访问 端口 了 。 结 果 是 我 们 在 service worker 和 窗口 之 
间 打 开 了 一 条 通信 渠道 ， 两 者 各 拥有 一 个 端口 。 

// 窗口 代码 

var msgChan = new MessageChannel(); 

msgChan.port1.onmessage = function(event) { 


console.log("Message received in page:", event.data); 


}; 

















var msg = {action: "triple", value: 2}; navigator.serviceWorker.controller. 
postMessage(msg, [msgChan.port2]); 


// service worker 代 码 
self.addEventListener("message", function (event) { 
var data = event.data; 
var openPort = event.ports[0]; 


if (data.action === "triple") { 
openPort .postMessage(data.vaLuex3); 
} 
]); 


页 面 上 的 代码 首先 创建 了 一 个 新 的 MessageChannel， 并 在 第 一 个 端口 上 添加 了 事件 监听 
器 ， 以 将 收 到 的 任何 信息 打印 出 来 。 接 下 来 ， 代 码 向 service worker 发 送 了 一 条 消息 ， 同 
时 将 MessageChannel 的 第 二 个 端口 传递 过 去 。 请 注意 ，postMessage 接收 一 个 端口 数组 作 
为 其 第 二 个 参数 ， 以 便 你 可 以 通过 0 个 或 者 多 个 端口 进行 通信 。 

同时 ， 在 service worker 中 ， 我 们 监听 了 发 送 到 service worker 的 message 事件 。 当 检测 到 
这 样 的 事件 时 ， 其 中 的 event 对 象 同时 会 包含 消息 内 容 (event.data) 和 页 面 发 送 的 端口 
数组 (event.ports)。 我 们 的 事件 监听 器 会 检查 消息 ， 如 果 data 对 象 中 包含 了 action 属 
性 ， 并 且 值 为 triple， 那 么 就 会 将 data 对 象 中 的 value 属性 乘 以 3， 然 后 将 消息 发 送 回 
去 。 这 个 消息 是 通过 在 event.ports[0] 中 找到 的 MessageChannel 端口 直接 发 送 的 ， 也 就 
是 页 面 中 创建 的 MessageChannel 的 port2。 随 后 ， 消 息 会 沿 着 从 service worker 到 页 面 的 
“绳子 ”到 达 port1， 在 那里 有 一 个 单独 的 事件 监听 器 会 将 其 打印 到 控制 台中 。 


这 个 简单 的 例子 展示 了 如 果 将 数学 计算 从 页 面 委派 给 service worker。 类 似 地 ， 页 面 可 以 询 
问 service worker 缓存 中 是 否 存 在 某 一 项 ， 或 者 当前 打开 了 多 少 个 展示 应 用 的 标签 。service 
worker 也 可 以 通过 反 向 询问 ， 向 其 控制 的 窗口 询问 输入 字段 的 值 ， 甚 至 是 用 户 在 页 面 中 的 
滚动 距离 ， 以 便 开 始 缓存 下 一 页 。 
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我 鼓励 你 再 次 看 看 之 前 的 例子 ， 对 比 调用 postMessage() 的 不 同方 式 ， 以 
及 添加 事件 监听 器 的 不 同方 式 。 请 注意 ， 我 们 可 以 在 service worker 对 象 和 
MessageChannel 端口 上 调用 postMessage()。 类 似 地 ， 有 时 候 我 们 在 service 
worker 上 监听 消息 事件 ， 有 时 候 则 是 在 MessageChannel 端口 上 监听 。 

如 果 事情 设 有 像 预 料 的 那样 发 生 ， 请 检查 你 是 否 将 事件 绑 定 在 了 正确 的 对 象 
上 ,以 及 是 否 将 消息 发 送 给 了 正确 的 对 象 。 如 果 service worker 将 消息 发 送 
到 一 个 MessageChannel 端口 ， 而 页 面 在 service worker 上 而 不 是 另 一 个 端口 
上 监听 了 message 事件， 就 什么 也 不 会 发 生 你 把 耳 杂 放 在 了 盘子 上 ， 而 
不 是 放 在 另 一 个 杯子 上 。 
















































































前 面 的 示例 演示 了 如 何 使 用 MessageChannel 来 响应 postMessage。 让 我 们 来 看 看 另 一 个 例 
子 ， 它 展示 了 如 何在 页 面 和 service worker 之 间 保 持 持续 的 通信 通道 打开 。 


// 窗口 代码 

var msgChan = new MessageChannel(); msgChan.port1.onmessage = function(event) { 
ConsoLe.Log("URL fetched:", event.data); 

}; 


navigator .serviceWorker .controller.postMessage("listening", [msgChan.port2]); 

















// service worker 代 码 
self.addEventListener("message", function (messageEvent) { 
var openPort = messageEvent.ports[0]; 
self.addEventListener("fetch", function(fetchEvent) { 
openPort.postMessage(fetchEvent.request.url); 
]); 
]); 


这 个 例子 中 的 窗口 代码 和 前 一 个 例子 非常 相似 。 我 们 创建 了 一 个 新 的 MessageChannel， 监 听 一 
个 端口 ， 并 发 送 消 息 给 service worker， 其 中 包含 另 一 个 端口 。 唯 一 的 变化 是 消息 的 内 容 。 























当 service worker 接收 到 这 条 消息 后 ， 它 为 自己 的 fetch 事件 添加 了 一 个 事件 监听 器 ， 让 其 
通过 openPort 发 送 消息 ， 其 中 包含 了 每 次 fetch 请 求 的 URL。 
结果 是 页 面 会 持续 记录 每 个 网 络 请 求 的 URL 一 一 不 仅 包含 当前 标签 页 的 请 求 ， 还 包含 了 这 








个 service worker 控制 的 其 他 窗口 的 请 求 。 将 这 个 文件 命名 为 network.html， 并 在 另 一 个 选 
项 卡 中 浏览 这 个 页 面 ， 此 时 你 已 经 完成 了 构建 属于 自己 的 浏览 器 开发 者 工具 的 第 一 步 了 。 


8.5 窗口 间 的 通信 


让 我 们 结合 目前 所 学 的 内 容 ， 看 看 如 何在 不 同窗 口 间 进行 通信 。 过 去 ， 在 不 同窗 口 间 传 
递 消 息 需 要 借助 于 一 些 技巧 ， 例 如 在 cookie、localStorage 其 至 服务 端 写 入 消息 。 但 是 ， 
service worker 提供 了 一 个 中 心 连接 点 ， 可 和 触 达 作 用 域内 每 一 个 打开 的 窗口 ， 使 我 们 最 终 可 
以 在 窗口 间 发 送 消 息 、 对 象 ， 其 至 是 MessageChannel 端口 。 


是 时 候 回 到 实际 编码 中 了 。 
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在 开始 前 ， 可 以 通过 在 命令 行 中 运行 以 下 命令 ， 确 保 代 码 处 于 上 一 章 结束 时 的 状态 : 


git reset --hard 
git checkout ch08-start 


在 哥 谭 帝国 酒店 My Account 页 面 的 顶部 ， 有 一 个 登 出 账号 的 链接 。 在 点 击 时 ， 该 链接 会 
把 用 户 送 回 网 站 首页 (这 个 应 用 建立 在 信任 的 基础 上 ， 不 需要 输入 用 户 名 或 者 密码 。 在 你 
的 应 用 中 ， 可 以 根据 实际 情况 在 这 里 包含 一 些 登录 /注销 的 逻辑 )。 让 我 们 修改 网 站 ， 使 得 
点 击 登 出 链接 时 ， 所 有 指向 My Account 页 面 的 打开 窗口 都 跳 转 到 网 站 首页 。 

在 app.js 中 修改 $(document).ready 函数 ， 如 下 所 示 : 


$(document).ready(function() { 
$.getJSON("/events.json", renderEvents); 












































if ("serviceWorker" in navigator) { 
$("#logout-button").click(function(event) { 
if (navigator.serviceWorker.controller) { 
event.preventDefault(); 
navigator .serviceWorker .controller .postMessage( 
{action: "logout"} 


); 


}); 
} 
}); 


代码 检查 了 service worker 的 支持 情况 ， 如 果 可 用 ， 则 给 
器 。 该 事件 监听 器 首先 检查 service worker 是 否 在 控制 页 
认 行 为 ， 然 后 发 送 消 息 给 service worker， 而 不 是 跳 转 页 面 。 


这 是 渐进 增强 的 一 个 很 好 的 示例 。 在 一 开始 ， 登 出 链接 类 似 于 其 他 简单 的 HTML (<a 
href="/">Logout</a>)， 并 且 功 能 齐全 。 然 后 ， 我 们 对 它 进行 了 增强 ， 让 它 在 支持 service 
worker 的 浏览 器 下 ， 支 持 多 个 窗口 同时 登 出 ， 而 且 不 会 破坏 旧 阐 览 右 中 的 默认 行为 。 


接 下 来 ， 我 们 在 service worker 中 添加 监听 这 个 消息 的 代码 。 
在 serviceworker.js 的 结尾 处 ， 添 加 下 列 代码 : 


self.addEventListener("message", function(event) { 
var data = event.data; 
if (data.action === "logout") { 
self.clients.matchAll().then(function(clients) { 
clients.forEach(function(client) { 
if (client.url.includes("/my-account")) { 
client.postMessage( 
{action: "navigate", url: "/"} 


); 











登 出 链接 添加 一 个 点 击 事件 监听 
面 ， 如 果 是 ， 就 会 阻止 链接 的 默 























这 段 代 码 监 听 了 message 事件 ， 从 事件 对 象 (event.data) 中 获取 了 消息 数据 ， 并 决定 
如 何 操作 。 如 果 消 息 数 据 包含 了 名 为 Logout 的 操作 ， 监 听 器 就 会 获取 当前 打开 的 所 有 
WindowClient， 逐 个 遍历 ， 并 检查 窗口 的 URL 是否 包含 /my-account。 如 果 包 含 ， 就 向 这 
个 窗口 发 送 一 条 消息 ， 其 中 包含 了 要 采取 的 操作 navigate 以 及 操作 的 URL /。 


这 个 消息 对 象 结构 包含 了 要 采取 的 操作 以 及 额外 的 参数 。 这 个 结构 完全 是 任 
意 的 ， 选 择 它 是 因为 它 适合 用 于 这 种 情况 。 此 处 navigate 对 于 浏览 器 来 说 并 
没有 特定 的 含义 ， 它 只 是 我 选择 的 一 个 字符 串 ， 描 述 了 我 希望 应 用 所 采取 的 
操作 。 


























接 下 来 ， 我 们 要 修改 页 面 ， 监 听 service worker 发 送 的 消息 。 
在 appjs 中 ， 修 改 $(document).ready 函数 ， 如 下 所 示 : 


$(document).ready(function() { 
$.getJSON("/events.json", renderEvents); 





if ("serviceWorker" in navigator) { 
navigator .serviceWorker .addEventListener("message", function (event) { 
var data = event.data; 
if (data.action === "navigate") { 
window.Location.href = data.url; 


} 
}); 


$("#logout-button").click(function(event) { 
if (navigator.serviceWorker.controller) { 
event.preventDefault(); 
navigator .serviceWorker .controller .postMessage( 
{action: "logout"} 


}); 


这 段 代码 新 添加 了 一 个 事件 监听 器 ， 监 听 了 service worker 的 message 事件 。 当 这 个 事件 监 
昕 器 触发 时 ， 会 获取 消息 内 容 ， 并 检查 消息 中 是 否 包 含 了 值 为 navigate 的 action 属性 。 如 
果 包 含 ， 就 将 当前 页 面 跳 转 到 消息 中 指定 的 URL。 

就 是 这 样 ! 我 们 刚才 渐进 增强 了 一 个 简单 的 HTML 链接 ， 使 得 它 不 仅 能 跳 转 当前 窗口 ， 还 
能 操作 所 有 符合 条 件 的 其 他 窗口 〈 即 显示 My Account 页 面 的 窗口 ) 。 

实现 这 一 点 的 逻辑 很 简单 。 


如 果 service worker 正在 控制 页 面 ， 则 重 写 登 出 链接 的 默认 操作 ， 改 为 发 送 消 息 给 service 
worker， 告 诉 它 进行 一 个 Logout 操作 。 与 此 同时 ，service worker 要 监听 这 些 消息 ， 并 在 
检测 到 这 些 消息 时 ， 向 包含 /my-account URL 的 所 有 受 控 制 窗口 发 送 消 息 ， 告 诉 它 们 采取 
navigate 操作 。 页 面 也 要 监听 这 些 消息 ， 并 且 在 检测 到 消息 时 ， 每 一 个 窗口 都 要 跳 转 到 消 
息 中 包含 的 URL。 
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请 注意 ， 在 示例 代码 中 ， 在 添加 事件 监听 器 之 前 ， 我 们 没有 检查 service 


worker 是 否 在 控 











制 页 面 。 虽 然 只 


有 当前 由 service worker 控制 的 页 面 才能 发 

















送 消 息 到 service worker， 但 是 任何 页 面 都 可 以 为 传人 消息 的 事件 添加 事件 监 


听 器 。 














在 8.2 节 中 可 以 看 到 service worker 向 未 受 控 制 页 面 发 送 消息 的 例子 。 


8.6 从 sync 事 件 回 页 面 传递 消息 


让 我 们 把 注意 力 转 向 本 章 开头 提出 的 挑战 。 


在 第 7 章 中 我 们 了 解 到 ， 将 事件 从 页 























看 转移 到 service worker 中 ， 可 使 应 用 更 具 弹 性 和 可 


靠 。 但 是 这 暴露 出 一 个 新 的 困难 。 如 果 页 面 将 发 送 消息 、 帖 子 点 赞 或 者 发 起 新 预订 这 样 的 
事件 委托 给 了 sync 事件 ， 我 们 如 何在 事件 完成 后 更 新 DOM 呢 ? 既然 我 们 知道 了 如 何在 
service worker 和 页 面 之 间 发 送 消 息 ， 就 拥有 了 解决 这 个 问题 所 需 的 所 有 工具 。 


在 7.4 节 中 ， 我 们 将 发 起 新 预订 的 逻辑 从 My Account 页 面 移动 到 了 sync 事件 中 。 不 幸 的 
是 ,在 sync 事件 成 功 完成 时 ， 我 们 并 不 能 将 消息 传 回 给 窗口 。 虽 然 我 们 可 能 使 应 用 更 具 弹 
性 了 ,但 实际 上 ， 我 们 在 用 户 体 验 上 后 退 了 一 步 。 虽 然 在 sync 事件 之 前 的 代码 确实 在 发 起 
预订 时 及 时 更 新 了 DOM， 但 是 新 的 同步 代码 要 等 到 下 次 页 面 从 网 络 请 求 更 新 时 ， 才 会 更 

















新 预订 状态 。 
让 我 们 修复 这 个 问题 。 





























在 serviceworker.js 中 更 新 syncReservations() 国 数 ， 如 下 所 示 : 


var SyncReservations = function() { 
return getReservations("idx_status", "Sending").then(function(reservations) { 


return Promise.all( 


reservations.map(function(reservation) { 
var reservationUrl = createReservationUrl(reservation); 
return fetch(reservationUrl).then(function(response) { 
return response.json(); 
}).then(function(newReservation) { 
return updateInObjectStore( 
"reservations", 
newReservation.id, 
newReservation 
).then(function() { 
postReservationDetails(newReservation); 


新 的 syncReservations() 函数 包含 了 一 处 改进 ; 在 调用 updateIn0bjectStore() 之 后 ， 它 
还 调用 了 postReservationDetails(), 传人 了 从 网 络 接收 到 的 新 预订 详情 。 








A 
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接 下 来 在 serviceworker.js 中 添加 postReservationDetails() 函数 ， 放 置 在 syncReservations() 
上 方 : 
var postReservationDetails = function(reservation) { 
self.clients.matchAll({ includeUncontrolled: true }).then(function(clients) { 
clients.forEach(function(client) { 
CLient.postMessage( 
{action: "update-reservation", reservation: reservation} 
); 
]); 
})); 
}; 
postReservationDetails() 的 代码 获取 了 service worker 作用 域内 所 有 的 客户 端 ， 对 其 进行 
迭代 ， 然 后 向 它们 逐一 发 送 消息 。 消 息 中 包含 了 新 预订 的 详情 ， 并 将 它 让 浏览 器 采取 的 操 
作 命 名 为 update-reservation。 


最 后 ， 回 到 app.js 中 ， 更 新 早 前 添加 的 message 事件 监听 器 ， 让 其 处 理 这 一 类 消息 : 


navigator .serviceWorker .addEventListener("message" ，function (event) { 
var data = event.data; 
if (data.action === "navigate") { 
window.Location.href = data.url; 
} else if (data.action === "Update-reservation") { 
updateReservationDisplay(data.reservation); 
} 
]); 


这 段 代 码 增 添 了 另 一 个 判断 条 件 ， 寻 找 操作 为 update-reservation 的 消息 。 当 检测 到 这 类 
消息 时 ， 代 码 会 调用 updateReservationDisplay() 国 数 ， 并 传人 消息 中 包含 的 新 预订 详情 。 
updateReservationDisplay() 可 以 在 my-account.js 中 找到 ， 这 个 方法 接收 一 个 预订 对 象 ， 
并 在 DOM 中 更 新 该 预订 的 详情 。 


在 第 7 章 中 ， 我 们 将 预订 逻辑 移动 到 了 service worker 中 。 现 在 ， 只 需 几 条 额外 的 命令 ， 就 
可 以 将 这 些 操 作 的 结果 传 回 页 面 ， 并 更 新 显示 。 这 个 闭环 就 完成 了 。 


8.7 小结 
本 章 探索 了 如 何 使 用 postMessage() 在 service worker 及 其 控制 的 窗口 之 间 进 行 通信 。 我 们 
能 够 用 sync 事件 中 更 新 的 预订 数据 增强 应 用 的 UI， 并 能 在 不 同 的 窗口 之 间 同 步 登 录 状 态 。 


在 第 11 章 中 ， 我 们 将 结合 本 章 所 学 的 知识 ， 进 一 步 提升 用 户 体 验 。 例 如 ， 当 应 用 已 经 缓 
存 了 离线 使 用 所 需 的 资源 之 后 ， 我 们 可 以 通过 从 service worker 的 install 事件 向 页 面 发 送 
消息 ， 告 知 用 户 。 


过 ， 首 先 我 们 要 探讨 渐进 式 Web 应 用 最 令 人 激动 的 两 项 新 特性 。 
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第 9 章 


可 安装 的 Web 应 用 :占领 主屏 先 机 





我 们 已 经 取得 了 很 多 成 就 ， 并 学 会 了 如 何在 Web 上 做 许多 以 前 无 法 想象 的 事情 ， 但 是 到 目 
前 为 止 ， 我 们 仍然 牢 牢 扎根 在 浏览 嚣 领域。 本章， 我 们 将 最 终 超越 浏览 器 ， 开 辟 一 个 新 的 
领域 ， 这 个 领域 曾经 是 原生 应 用 专属 的 。 
我 们 将 看 到 如 何在 用 户主 屏 上 占领 先 机 ， 并 构建 出 可 以 安装 在 用 户 设备 上 的 Web 应 用 。 当 
用 户 访问 这 些 Web 应 用 时 ， 浏 览 器 会 自动 提示 用 户 将 它们 安装 到 设备 的 主屏 幕 上 。 这 些 
Web 应 用 可 以 在 全 屏 模式 下 启动 (没有 任何 浏览 器 本 身 的 界面 )， 使 得 它们 看 起 来 和 原生 
应 用 无 异 ， 并 且 可 以 锁定 在 某 个 屏幕 方向 上 〈 即 横 屏 或 者 竖 屏 模式 ) ， 等 等 〈 见 图 9-1)。 
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9.1 可 安装 的 Web 应 用 
本 章 开 头 承诺 的 功能 看 起 来 很 神奇 ， 但 是 其 实现 却 异 常 简 单 。 实 际 上 ， 只 需要 三 个 步骤 : 


(1) 注 册 service worker; 
(2) 创建 Web 应 用 清单 文件 ; 
(3) 在 Web 应 用 中 ， 添 加 这 个 清单 的 链接 。 


鉴于 我 们 已 经 在 Web 应 用 中 注册 了 一 个 service worker， 我 们 已 经 完成 了 三 分 之 一 的 工作 。 
下 面 来 完成 剩 下 的 两 步 。 


首先 ， 创 建 一 份 Web 应 用 清单 (web app manifest) 。 

这 个 清单 是 一 个 简单 的 JSON 文件 ， 描 述 了 Web 应 用 应 该 如 何 启动 和 表现 及 其 外 观 。 就 是 
么 简单 。 

在 开始 前 ， 要 通过 在 命令 行 中 运行 以 下 命令 ， 确 保 代 码 处 于 上 一 章 结束 时 的 状态 


git reset --hard 
git checkout ch09-start 


接 下 来 ， 在 哥 谭 帝 国 酒店 项 目的 pubtlic 目录 中 ， 创 建 一 个 名 为 manifestjson 的 文件 ， 内 容 如 下 : 














和 
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{ 
"short_name": "Gotham Imperial", 
"name": "Gotham Imperial Hotel", 
"description": "Book your next stay, manage reservations, and expLore Gotham", 
"start_url": "/my-account?utm_ source=pwa", 
"seope”s /ss 
"display": "fullscreen", 
"icons": [ 


"src": "/img/app-icon-192.png", 
"type" : "image/png", 
"sizes": "192x192" 


"src": "/img/app-icon-512.png", 
"type" : "image/png", 
"sizes": "512x512" 


]， 
"theme_color": "#242424",， 
"background_color": "#242424" 


} 
虽然 manifest.json 中 的 内 容 不 言 自明 ， 但 我 们 将 在 9.3 节 中 深入 研究 清单 文件 的 细节 。 


接 下 来 ， 在 index.html 和 my-account.html 的 头 部 添加 下 列 HTML 标签 ， 让 浏览 器 知道 这 
个 网 站 有 可 用 的 清单 文件 。 


<link rel="manifest" href="/manifest.json"> 
就 是 这 样 ! 
现在 一 切 都 取决 于 浏览 器 了 。 
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9.2 浏览 器 如 何 决定 何 时 显示 应 用 安装 横 条 


当 浏览 器 确定 一 个 网 站 可 以 安装 ， 并 且 用 户 可 能 对 于 该 网 站 有 足够 的 兴趣 ， 并 希望 在 主屏 
上 放置 快捷 方式 时 ， 就 会 触发 一 个 Web 应 用 安装 横 条 (如 图 9-2 所 示 )。。 








COVINA 


Imecriol llolel 
四 Gotham Imperial Hotel X 
gothamimperialhotel.com 


ADD TO HOME SCREEN 

















9-2: Chrome 中 的 Web 应 用 安装 横 条 


浏览 器 只 有 在 它 认 为 应 用 满足 特定 的 最 低 标 准 ， 能 够 提供 类 似 于 原生 应 用 的 体验 ， 值 得 放 
置 在 用 户主 屏 时 ， 才 会 在 网 站 上 显示 Web 应 用 安装 横 条 。 

在 编写 本 书 时 ， 这 些 标准 如 下 : 

(1) 网 站 提供 HTTPS 服务 ， 

(2) 网 站 注册 了 service worker; 

(3) 网 站 拥有 一 份 Web 应 用 清单 ， 其 中 至 少 包 含 了 四 个 必 填 字段 ( 详 见 9.3 节 )。 

此 外 ， 浏 览 器 只 有 在 认为 用 户 可 能 足够 在 乎 这 个 Web 应 用 ， 和 希望 在 主屏 上 放置 一 个 永久 快 
捷 方 式 时 ， 才 会 显示 Web 应 用 安装 横 条 。 至 于 如 何 确 定 这 一 点 ， 不 同 浏 览 器 以 及 不 同 浏 览 
器 版 本 之 间 都 会 有 所 不 同 。 举 个 例子 ， 最 初 启用 这 个 功能 时 ， 当 用 户 在 两 周 之 内 有 两 天 访 
问 了 应 用 时 ，Opera 和 Chrome 就 会 显示 安装 横 条 。 后 来 ， 这 些 局 发 式 方法 已 经 被 修改 了 ， 以 
增加 安装 横 条 的 显示 频率 ， 并 且 目 前 仍然 在 不 断 被 各 浏览 器 厂商 调整 ， 以 微调 用 户 的 体验 。 

































































注 1: 本 书 中 提 到 的 安装 横 条 指 的 是 不 同 种 类 的 安装 提示 ， 其 中 包括 Chrome 和 Opera 中 的 Web 应 用 安装 横 
条 、 三 星 浏览 器 中 的 徽章 等 。 
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总 而 言 之 ， 如 果 满 足以 下 条 件 ， 浏 览 器 就 会 显示 安装 横 条 : 


if ( 

Web 应 用 提供 HTTPS && 

Web 应 用 注册 了 service worker && 

应 用 拥有 有 效 的 清单 文件 ， 其 中 包含 了 所 有 必需 的 属性 && 
清单 文件 在 用 户 访问 的 页 面 中 有 链接 8&& 

浏览 器 认为 用 户 对 于 这 款 应 用 有 持久 的 兴趣 && 

这 款 应 用 的 安装 横 条 在 过 去 没有 被 显示 和 拒绝 过 

then { 

显示 Web 应 用 安装 横 条 












































Ds 























} 


9.3 剖析 Web 应 用 清 
在 继续 之 前 ， 我 们 先 探索 Web 应 用 清单 的 格式 。 


任何 有 效 的 JSON 文件 都 可 以 成 为 清单 文件 ， 但 是 要 触发 Web 应 用 安装 横 条 ，i 
必须 至 少 包含 以 下 属性 。 


name 与 /或 short_name 
清单 文件 必须 包含 name 或 者 short_name 属性 ， 或 者 〈 最 好 ) 两 者 都 包含 。 


name 是 应 用 的 全 名 。 当 空间 足够 长 时 ， 就 会 使 用 这 个 字段 作为 显示 名 称 ， 例 如 显示 在 
应 用 安装 横 条 以 及 应 用 的 启动 屏幕 上 。 


如 果 应 用 名 称 特别 长 ， 那 么 在 没有 足够 空 en 
名 的 备 选 方案 。 短 名 会 用 在 应 用 图 标的 旁边 、 任 务 管 理 器 中 ， 以 及 任何 不 适合 显示 全 名 
的 地 方 。 We lo 


让 我 们 来 看 一 个 例子 。 如 果 你 的 应 用 全 名 相对 较 短 ， 可 以 自由 选择 提供 short_name 和 
name 中 的 一 个 ， 而 忽略 另 一 个 参数 。 如 果 应 用 名 称 比较 长 〈 例 如 Gotham Imperial Hotel ) ， 
那么 就 要 同时 提供 全 名 和 备 选 的 短 名 (例如 Gotham Imperial) ， 才 可 以 确保 设备 不 会 自动 
截取 应 用 名 称 (显示 “Gotham Imperial” 比 起 显示 “Gotham Imperial Hot...” 好 多 了 )。 


start_url 
当 用 户 点 击 图 标 时 ， 打 开 的 URL。 可 以 是 根 域名 ， 也 可 以 是 内 部 页 面 。 


对 于 哥 谭 帝国 酒店 ， 当 用 户 从 主屏 启动 应 用 时 ， 我 们 使 用 了 My Account 页 作为 第 一 个 
显示 的 页 面 ， 而 不 是 首页 。 我 们 还 在 查询 字符 串 中 添加 了 一 个 utm_source=pwa 标签 ， 
以 便 分 析 软 件 用 它 来 跟踪 从 主屏 启动 的 访客 。 如 果 你 要 在 你 的 应 用 中 做 同样 的 事情 ， 请 
确保 service worker 知道 如 何 匹 配 查询 字符 串 中 带 有 或 不 带 utm_source 的 情况 (5.7 节 
中 的 代码 可 以 正确 匹配 这 些 请 求 ， 因 为 它 使 用 了 pathname 参数 ， 没 有 包括 查询 字符 串 
的 匹配 )。 
icon 

包含 了 一 个 或 多 个 对 象 的 数组 ， 每 个 对 象 描述 了 一 个 Web 应 用 可 以 使 用 的 图 标 。 其 中 
每 个 对 象 都 会 包含 以 下 属性 : src (图 标的 绝对 路 径 或 者 相对 路 径 )、type (文件 类 型 ) 
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单 文件 就 
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和 sizes (图 片 的 像素 尺寸 )。 要 触发 Web 应 用 安装 横 条 ， 清 单 中 至 少 要 包含 一 个 图 标 ， 
尺寸 至 少 是 144 像素 x 144 像素 。 


由 于 每 个 设备 都 会 根据 设备 分 辨 率 ， 从 这 个 数组 中 选择 最 佳 的 图 标尺 寸 ， 因 此 建议 至 少 
包含 192 x 192 的 图 标 和 512 x 512 的 图 标 ， 以 覆盖 大 多 数 的 设备 和 用 途 。 

display 
控制 应 用 启动 时 的 显示 模式 ( 见 
可 能 的 值 如 下 。 


。 browser 


























器 





9-3 ) 。 








在 浏览 器 中 打开 应 用 。 
打开 应 用 时 不 显示 浏览 器 栏 (不 显示 浏览 器 界面 ， 例 如 地 址 栏 )。 


。 fullscreen 一 一 打开 应 用 时 不 显示 浏览 器 栏 和 设备 栏 (例如 在 安 卓 设备 上 ， 这 意味 着 
同时 隐藏 浏览 器 界面 和 屏幕 顶部 的 状态 栏 )。 


使 用 桌面 应 用 的 说 法 ， 可 以 把 standalone 和 fuLLscreen 分 别 视 为 最 大 化 或 者 全 屏 模 
式 的 应 用 ， 而 browser 的 行为 就 和 在 浏览 器 中 点 击 任 何 链接 是 一 致 的 。 


要 显示 Web 应 用 安装 横 条 ，display 属性 必须 设置 为 fullscreen 或 者 standalone。 











。 standalone 
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9-3， 从 左 到 右 ，browser 模式 、standalone 模式 和 fullscreen 模式 


除了 上 面 描述 的 属性 最 小 集 外 ，Web 应 用 清单 还 支持 下 列 属性 。 

description 
应 用 的 描述 。 

orientation 
允许 你 强制 指定 某 个 屏幕 方向 。 如 果 你 的 应 用 布局 在 竖 屏 或 者 横 屏 时 表现 更 加 ， 那 么 这 
会 非常 有 用 。 例 如 ， 许 多 游戏 会 强制 采用 横 屏 模式 ， 而 重文 本 类 应 用 通常 更 倾向 于 竖 屏 





























142 | 第 9 章 


模式 〈 见 图 9-4) 。 
以 下 是 orientation 最 常见 的 可 能 取 值 : 
。 Landscape 


。 portrait 
。 auto 





py 
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FlloOlc 


» 
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Imee 
LuxUry and tradition'since 1949; 


多 
雪 
= 
= 


ExperienealGotham. Experience Imperial, 











图 9-4: 被 锁定 为 坚 屏 的 Web 应 用 
theme_color 


主题 颜色 可 以 让 浏览 器 和 设备 调整 UI 以 匹配 你 的 网 站 〈 见 图 9-5)。 这 个 颜色 的 选择 会 
影响 浏览 器 地 址 栏 颜色 、 任 务 切换 器 中 的 应 用 颜色 ， 甚 至 是 设备 状态 栏 的 颜色 。 





全 A 9:19 


August 9th 2016 


New Year's Eve Party Rooftop Party Horticultural Society Luncheon 


The Gotham Imperial invites you to celebrate Come celebrate the re-opening of our rooftop Come celebrate another great year with 
our annual New Year's Eve party. bar, following last year's incident. Gotham'shorticultural elite. 


August 7th 2016 


图 9-5: 带 有 主题 颜色 的 网 站 和 手机 界面 完美 融合 
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主题 颜色 也 可 以 通过 页 面 的 meta 标签 进行 设置 (例如 : <meta name="theme-color" 
content="#2196F3">)。 如 果 页 面 带 有 theme-color 的 meta 标签 ， 则 该 设置 会 履 盖 清单 
中 的 theme_color 设置 。 请 注意 ， 虽 然 meta 标签 可 以 让 你 设置 或 者 覆盖 单个 页 面 的 主 
题 颜色 ， 但 是 清单 文件 中 的 theme_color 设置 是 会 影响 整个 应 用 的 。 






































background_color 











设置 应 用 启动 画面 的 颜色 以 及 应 用 加 载 时 的 背景 色 。 一 旦 加 载 后 ， 页 面 中 定义 的 任何 背 
景色 (通过 样式 表 或 者 内 联 HTML 标签 设置 ) 都 会 覆盖 这 一 设置 但是， 通过 将 其 设 
置 为 与 页 面 背景 色相 同 的 颜色 ， 就 可 以 实现 从 页 面 启动 的 瞬间 到 完全 泻 染 之 间 的 平滑 过 
渡 。 如 果 不 设置 这 一 颜色 ， 页 面 就 会 从 白色 背景 启动 ， 随 后 被 页 面 的 背景 色 替 换 。 
























































scope 


dir 


Lan 


定义 了 应 用 的 作用 域 。 当 用 户 处 于 一 个 full-screen/standalone 模式 的 应 用 中 ， 并 跳 转 
到 这 个 作用 域 下 的 另 一 个 URL 时 ， 这 个 URL 也 会 在 full-screen/standalone 模式 下 打 
开 。 然 而 ， 如 果 用 户 点 击 的 链接 将 他 带 出 了 作用 域 范 围 外 ， 链 接 就 会 在 常规 浏览 器 窗口 
中 打开 。 


例如 ， 如 果 我 们 设置 了 "scope": "/my-account/"， 当 用 户 在 这 个 作用 域内 跳 转 时 〈 例 
如 /my-acount/talater 或 者 /my-account?sort=date)， 会 留 在 应 用 中 。 但 是 一 旦 用 户 点 
击 了 这 个 范围 外 的 链接 (例如 /index.html 或 者 https://pwabook.com)， 页 面 就 会 在 浏 
览 器 中 打开 。 


在 某 些 浏览 器 中 ，scope 还 会 用 来 设置 安 卓 系统 的 Intent Filter。 当 一 个 Web 应 用 被 安装 
并 且 设 置 了 scope 时 ， 任 何 指向 应 用 作用 域内 页 面 的 链接 都 会 启动 这 款 应 用 ， 而 不 是 直 
接 在 浏览 器 中 打开 。 例 如 ， 如 果 用 户 之 前 已 经 安装 了 我 们 的 渐进 式 Web 应 用 ， 然 后 从 
一 个 旅游 评论 网 站 点 击 了 链接 https:/www.GothamImperial.com/my-account， 那 么 该 链接 
就 会 启动 我 们 的 应 用 ， 而 不 是 在 浏览 器 中 展示 页 面 。 












































显示 name、short_name 和 description 参数 文本 的 方向 。 默 认 情 况 下 适 配 浏 览 器 的 语言 
设置 ， 但 是 也 可 以 设置 为 以 下 值 之 一 。 


























。 1tr 一 一 从 左 到 右 的 语言 ， 例 如 英语 和 和 葡萄牙 语 

。 rtl 一 一 从 右 到 左 的 语言 ， 例 如 希 伯 来 语 和 阿拉 伯 语 
。 auto 一 一 使 用 浏览 器 的 语言 设置 

g 


指定 name、short_name 和 description 参数 文本 的 主要 语言 。 
可 以 和 dir 参数 一 起 用 来 保证 任何 语言 的 文本 正确 显示 ， 包 括 从 右 到 左 的 语言 。 


prefer_related applications 


如 果 你 还 有 一 款 原生 应 用 ， 并 且 你 更 喜欢 浏览 器 提供 原生 应 用 ， 而 不 是 你 内 亮 的 新 渐进 
式 Web 应 用 ， 那 么 可 以 把 prefer_related_applications 设置 为 true。 


当 设 置 为 true， 并 且 把 当前 平台 下 的 原生 应 用 列举 在 related_applications 中 时 ， 网 
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页 会 显示 原生 应 用 的 安装 横 条 而 不 是 Web 应 用 的 安装 横 条 。 除 了 不 依赖 于 service 
worker 之 外 ， 显 示 原 生 应 用 安装 横 条 的 要 求 和 显示 Web 应 用 安装 横 条 的 要 求 是 一 致 的 。 
related_applications 

这 个 参数 接收 一 个 “应 用 对 象 ”的 数组 。 每 个 对 象 中 包含 了 一 个 platforn 平台 参数 
(例如 pay、itunes)、 一 个 url 参数 (表明 应 用 可 以 在 哪里 获取 )， 还 有 id 参数 (用 来 
表示 特定 平台 中 的 标识 )。 

下 面 的 示例 定义 了 关联 的 Android 和 iPhone 应 用 ， 并 告诉 浏览 器 优先 显示 原生 应 用 安 
装 横 条 ， 而 不 是 Web 应 用 安装 横 条 : 


"related_applications": [ 











"platform": "play", 
"url": "https://play.google.com/store/apps/details?id=com.goth.app", 
"id": "com.goth.app" 


}, { 

"platform": "itunes", 

"url": "https://itunes.apple.com/app/gotham-imperial/id1234" 
}]，, 


"prefer_related_applications": true 


9.4 各 端 兼 容 性 


你 安装 的 应 用 图 标 ， 在 Android 中 的 显示 方式 与 Windows 8、Windows 10 中 的 显示 方式 大 
不 相同 ， 和 较 新 的 带 Touch Bar 的 MacBook Pro 相 比 也 大 不 相同 。 即 使 是 在 单个 平台 下 ， 
图 标 也 可 能 根据 屏幕 分 辩 率 的 不 同 而 变化 很 大 。 


每 个 平台 、 浏 览 器 、 操 作 系 统 和 设备 显示 应 用 和 图 标的 方式 都 不 一 样 。 
坦率 地 说 ， 这 是 个 不 断 变化 的 雷 区 。 


试图 跟 上 变化 ， 并 在 本 书 中 洱 盖 每 个 平台 的 要 求 是 不 现实 的 。 幸 运 的 是 ， 有 很 多 很 棒 的 在 
线 工具 可 以 帮助 你 优雅 地 处 理 这 些 复杂 性 ， 你 可 以 在 https://pwabook.com/appicons 中 找到 
这 份 列表 。 


除了 本 章 早 些 时 候 添加 的 清单 文件 外 ， 哥 谭 帝 国 酒店 已 经 配置 了 一 些 在 不 同 平 台 上 显示 图 
标 所 需 的 更 重要 的 设置 。 你 可 以 在 index.html 的 <HEAD> 标签 中 看 到 这 些 代码 : 
<Link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png"> 
<Link rel="icon" type="image/png" href="/img/favicon-32x32.png" sizes="32x32"> 
<link rel="icon" type="image/png" href="/img/favicon-16x16.png" sizes="16x16"> 
<link rel="shortcut icon" href="/favicon.ico"> 
<link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#a3915e"> 
<meta name="msapplication-config" content="/browserconfig.xml"> 
<meta name="theme-color" content="#242424"> 


这 些 设置 中 包含 了 添加 到 iPhone 的 主屏 快捷 方式 图 标 (apple-touch-icon)、 可 信 的 
favicon (在 浏览 器 标签 和 书签 中 显示 )、Safari 固定 标签 图 标 (mask-icon)， 以 及 微软 的 应 
用 配置 文件 (msapplication-config) 链接 ， 这 个 配置 文件 可 以 决定 Windows 设备 上 的 应 
用 外 观 。 此 外 ， 我 们 还 为 较 旧 的 浏览 器 定义 了 theme-coLor ， 而 不 是 从 清单 文件 中 读 取 。 
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9.5 ”小结 
儿 年 前 ， 浏览 器 菜单 中 隐藏 很 深 的 “添加 到 主屏 快捷 方式 ”选项 ， 现 在 已 经 演变 成 了 可 安 
装 的 Web 应 用 。 


这 些 应 用 结合 了 原生 应 用 的 所 有 好 处 ， 同 时 又 避免 了 许多 缺点 ， 甚 中 包括 野蛮 的 安装 模 
型 ， 将 其 替换 成 逐步 在 用 户 设备 上 立足 的 方式 。 


但 是 权力 越 大 责任 越 大 。 如 果 想 让 应 用 可 以 和 原生 应 用 比肩 ， 就 需要 考虑 给 予 用 户 的 体 
验 。 我 们 将 在 第 11 章 深入 探讨 这 一 点 。 


但 首先 ， 我们 会 在 第 10 章 中 探索 推送 消息 ， 进 一 步 脱 离 浏 览 器 


















































第 10 章 


推送 通知 





很 少 有 (如果 有 的 话 ) 功能 像 推送 通知 那样 ， 成 为 原生 应 用 和 Web 应 用 之 间 的 主要 鸿沟 。 


推送 通知 让 用 户 能 够 选择 获得 他 们 所 关注 的 应 用 的 更 新 ， 并 及 时 更 新 他 们 所 需 的 内 容 和 数 
据 。 你 能 想象 到 使 用 一 款 不 提供 通知 的 即时 消息 应 用 的 场景 吗 ? 


作为 开发 者 ， 推 送 通知 可 以 让 我 们 改善 应 用 的 用 户 体验 ， 并 因此 提高 使 用 率 。 对 于 应 用 的 
采用 和 成 功 来 说， 它们 可 能 比 其 他 任何 因素 都 更 重要 。 


对 于 企业 而 言 ， 能 够 重新 获得 用 户 ， 并 将 他 们 一 次 又 一 次 地 带 回 应 用 中 ， 是 提高 每 次 应 用 安 
装 的 价值 的 关键 。 这 使 得 企业 可 以 投入 更 多 的 资金 来 获取 用 户 ， 同 时 仍 保持 投资 的 正 回报 。 


毫 不 夸张 地 说 ， 推 送 通知 一 直 是 原生 应 用 成 功 的 最 大 驱动 因素 之 一 。 


但 是 ， 既 然 Web 已 经 能 够 充分 获得 推送 通知 的 能 力 ， 我 们 终于 可 以 推翻 本 章 开 头 的 陈述 
了 : 很 少 有 《如果 有 的 话 ) 功能 能 像 推 送 通知 那样 ， 给 Web 应 用 带 来 如 此 巨大 的 影响 。 


10.1 推送 通知 的 生命 周期 
我 们 从 第 1 章 开 始 就 一 直 在 讨论 推送 通知 ， 现 在 终于 是 时 候 说 这 句 话 了 : 
事实 上 ， 推 送 通 知 包含 了 两 个 概念 。 


推送 通知 实际 上 包括 了 两 件 独 立 的 事情 : 使 用 Push API 发 送 消 息 ， 使 用 Notification API 
显示 通知 。 

































































10.1.1 _ Notification API 
Notification API 可 以 让 网 页 或 service worker 创建 并 控制 系统 通知 的 显示 。 
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通知 会 显示 在 浏览 器 的 外 部 (在 设备 的 UI 上 )， 因 此 通知 是 存在 于 任何 单个 浏览 器 窗口 或 
者 标签 页 的 上 下 文 之 外 的 。 由 于 通知 不 依赖 于 任何 浏览 器 窗口 或 者 标签 页 ， 其 至 可 以 在 用 
户 离开 网 站 之 后 再 创建 它们 。 


在 你 向 用 户 显示 通知 之 前 ， 需 要 首先 请 求 用 户 的 许可 。 
整个 过 程 很 简单 ， 就 如 下 面 这 个 功能 完备 的 代码 示例 所 展示 的 那样 : 


Notification.requestPermission().then(function(permission){ 























if (permission === "granted") { 
new Notification("Shiny"); 
} 
]); 


只 需 用 这 段 示 例 代码 就 可 以 请 求 显 示 通 知 的 权限 。 然 后 ， 如 果 权 限 被 授予 (granted) ， 就 
创建 一 个 标题 为 Shiny 的 通知 。 就 这 么 简单 。 

在 本 章 后 面 ， 我 们 将 会 添加 按钮 、 图 标 ， 甚 至 让 通知 使 用 《星球 大 战 》 主 题 振 动用 户 的 
手机 。 














10.1.2 Push API 

Push API 允许 用 户 同意 应 用 推送 消息 ， 让 服务 器 可 以 随时 推送 消息 到 浏览 器 。 这 些 消息 会 
由 service worker 监听 并 处 理 ， 其 至 在 用 户 离开 应 用 后 也 可 以 进行 操作 。 最 常见 的 操作 方 
式 就 是 向 用 户 显 示 通 知 。 

这 给 应 用 带 来 了 巨大 的 能 量 。 一 旦 你 可 以 在 任何 时 候 向 用 户 的 设备 发 送 消息 ， 你 就 有 可 能 
用 无 尽 的 消息 来 骚扰 他 。 你 甚至 可 以 通过 每 隔 几 秒 向 service worker 发 送 消 息 ， 然 后 将 一 
些 影响 数据 响应 发 回 服务 器 ， 来 静默 地 跟踪 用 户 的 行为 。 

为 了 确保 Push API 不 会 被 这 样 滥用 ， 所 有 的 推送 消息 都 要 通过 中 心 消息 服务 器 。 中 心服 务 
器 由 浏览 器 供应 商 维护 ， 它 会 为 你 跟踪 所 有 用 户 的 订阅 。 它 确保 推送 消息 不 会 被 滥用 ， 量 
用 户 不 会 被 骚扰 。 即 使 用 户 在 你 发 送 消息 时 无 法 触 达 ， 它 也 能 确保 消息 被 到 达 。 

你 和 用 户 之 间 的 中 间 人 ， 以 及 确保 只 有 你 的 服务 器 可 以 给 用 户 发 送 消息 所 需 的 全 部 加 密 过 
程 ， 让 学 习 曲 线 变 得 有 些 陡峭 。 我 们 将 把 这 个 过 程 分 成 四 个 步骤 ， 逐 一 讲解 。 

前 两 个 步骤 是 用 户 订阅 推 送 销 息 ， 以 及 将 推送 的 详情 保存 到 你 的 服务 器 上 。 这 两 个 步骤 每 
个 用 户 只 需 执行 一 次 。 
后 两 个 步骤 一 一 从 服务 器 发 送 消 息 以 及 在 浏览 器 中 进行 操作 一 一 会 在 每 次 你 想 要 发 送 消息 
给 用 户 时 发 生 。 这 可 以 在 创建 订阅 后 立即 进行 ， 也 可 以 在 一 周 后 才 进 行 。 
首先 看 看 前 两 个 步 又 ( 见 图 10-1)。 
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你 的 服务 器 











图 10-1: 创建 并 存储 推送 订阅 








首先 ，Web 页 面 使 用 了 Push API 来 调用 subscribe()。 这 将 会 调用 中 心 消息 服务 器 ， 该 服 
务 器 会 存储 新 订阅 的 详情 ， 并 将 详情 返回 给 页 面 。 接 下 来 ， 页 面 可 以 将 订阅 详情 发 送 给 你 
的 服务 器 ， 服 务 器 可 以 将 其 存储 下 来 ， 以 供 将 来 使 用 。 你 将 经 常 需要 把 这 些 订阅 细节 保存 
在 数据 库 中 ， 也 许 是 保存 在 你 用 来 保存 其 他 用 户 详情 的 同一 个 表 或 者 对 象 存储 中 。 


接 下 来 是 每 次 你 要 发 送 消 息 时 需 采 取 的 后 两 个 步骤 ( 见 图 10-2)。 







































3. 发 送 消 息 
给 订阅 者 


你 的 服务 器 








图 10-2， 从 服务 器 发 送 推送 消息 


当 你 决定 要 发 送 消 息 时 ， 服 务 器 要 先 获 取 它 之 前 存储 的 订阅 详情 (步骤 2)， 然 后 使 用 这 些 
数据 把 消息 发 送 到 消息 服务 器 。 然 后 ， 消 息 服务 器 将 消息 转发 到 用 户 的 浏览 器 。 最 后 ， 用 
户 浏 览 器 中 注册 的 service worker 接收 到 消息 ， 阅 读 其 内 容 ， 并 决定 如 何 处 理 。 

最 后 一 个 注意 事项 是 : 创建 新 的 推送 订阅 (步骤 1) 需要 用 户 的 许可 。 幸 和 运 的 是 ， 它 使 用 
的 权限 和 显示 通知 所 需 的 权限 相同 ， 所 以 你 只 需要 请 求 一 次 权限 ， 就 能 显示 通知 和 发 送 推 
送 消 息 0° 











10.1.3 Push+Notification 
让 我 们 综合 以 上 内 容 ， 看 看 向 用 户 发 送 推送 通知 的 整个 过 程 : 
(1) 页 面向 用 户 请 求 显示 通知 的 权限 ， 用 户 授 权 ， 
(2) 页 面 和 中 央 消 息 服 务 器 通信 ， 要 求 服务 器 为 这 个 用 户 创建 一 个 新 的 订阅 ， 
(3) 消息 服务 器 返回 新 的 订阅 详情 对 象 作为 响应 ， 
(4) 页 面 将 订阅 详情 发 送 给 服务 器 ，; 
(5) 服务 器 将 订阅 详情 储存 起 来 ， 以 供 将 来 使 用 
(6) 时 间 流 逝 ， 季 节 变 化 ， 需 要 发 送 新 的 通知 ; 
(7) 服务 器 使 用 订阅 详情 ， 通 过 消息 服务 器 将 消息 发 送 给 用 户 ， 
(8) 消息 服务 器 将 消息 转发 给 用 户 的 浏览 器 ， 
(9) service worker 的 push 事件 监听 器 收 到 消息 ， 
(10) service worker 显示 通知 ， 其 中 包含 了 消息 内 容 。 
推送 通知 的 浏览 器 支持 度 
在 大 部 分 现代 桌面 浏览 器 中 ， 可 以 从 活动 的 窗口 创建 简单 的 通知 ， 如 本 章 前 
面 所 示 。 
接收 推送 消息 并 显示 通知 ， 需 要 service worker、Notification API 和 Push API 
的 支持 。 
在 本 书 编写 时 ，Firefox、Chrome、Chrome for Android、Samsung Internet 和 
Opera 已 经 支持 ，Edge 浏览 器 正在 开发 支持 中 。 
在 本 章 介 绍 的 API 完成 之 前 ， 蕴 果 公 司 就 已 经 为 Safari 用 户 创建 了 发 送 通 知 
的 专用 API。 你 可 以 在 Apple 开发 者 网 站 上 阅读 更 多 相关 信息 。 


10.2 创建 通知 
现在 我 们 对 于 推送 通知 有 了 理论 上 的 理解 ， 让 我 们 开始 编写 第 一 个 通知 。 
和 往常 一 样 ， 首 先 在 命令 行 中 运行 以 下 命令 ， 以 确保 代码 处 于 上 一 章 结 束 时 的 状态 : 


git reset --hard 
git checkout ch10-start 


10.2.1 请 求 通知 权限 

正如 我 们 在 10.1 节 中 看 到 的 那样 ， 在 向 用 户 显示 通知 之 前 ， 首 先 要 获得 用 户 的 许可 。 

你 可 以 通过 检查 Notification.permission 的 值 ， 判 断 当前 网 站 是 否 具有 创建 通知 的 权限 。 
如 果 当 前 页 面 拥有 显示 通知 的 权限 ，permission 的 值 会 等 于 granted， 如 果 用 户 尚未 决定 ， 
值 会 是 default， 如 果 用 户 拒绝 了 权限 请 求 ， 那 么 值 会 等 于 denied: 


if (Notification.permission === "granted") { 
console.log("Notification permission was granted"); 


} 
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如 果 你 还 没有 获得 权限 ， 可 以 通过 调用 Notification API 的 requestPermission() 方法 ， 向 
用 户 请 求 权限 : 


Notification.requestPermission(); 


这 样 做 会 在 浏览 器 界面 显示 请 求 权限 ( 见 图 10-3)。 
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图 10-3: 通知 权限 的 对 话 杠 


requestPermission 方法 会 返回 一 个 promise， 当 用 户 (或 者 浏览 器 ) 做 出 许可 决定 后 ， 
promise 会 完成 。 需 要 重点 记 住 的 是 ， 这 个 promise 即使 在 用 户 拒绝 许可 ， 或 者 浏览 器 自动 
阻止 了 权限 请 求 许可 上 时， 也 会 完成 。 所 以 ， 在 请求 权限 后 、 堂 试 创建 通知 之 前 ， 总 是 要 检 
查 许可 的 当前 状态 ， 这 一 点 非常 重要 。 


Notification.requestPermission().then(function(permission) { 











if (permission === "granted") { 
console.log("Notification permission granted"); 
} 
]); 
在 requestPermission() 返回 的 promise 中 ，permission 参数 可 以 是 下 列 值 中 的 任意 一 个 。 
granted 


当前 页 面具 有 显示 通知 的 权限 。 这 意味 着 两 种 可 能 
(1) requestPermission() 被 调用 后 ， 显 示 权限 许可 对 话 框 ， 用 户 选 择 同意 ，; 


(2) requestPermission() 被 调用 ， 但 由 于 用 户 之 前 已 经 授权 过 ， 所 以 不 需 再 显示 权限 许 
可 对 话 框 。 


denied 
当前 页 面 不 具有 显示 通知 的 权限 。 这 意味 着 两 种 可 能 


(1) requestPermission() 被 调用 后 ， 显 示 权 限 许可 对 话 框 ， 但 用 户 选择 拒绝 ， 
(2) requestPermission() 被 调用 ， 但 由 于 用 户 之 前 已 经 拒绝 过 ， 所 以 不 需 再 显示 权限 许 
可 对 话 框 。 














default 
当前 页 面 不 具有 显示 通知 的 权限 。 这 种 情况 只 有 一 种 可 能 : 
。 requestPermission() 被 调用 后 ， 显 示 权 限 许可 对 话 框 ， 但 用 户 没 有 做 出 选择 ， 直 接 



































关闭 了 对 话 框 。 
将 所 有 内 容 放 在 一 起 ， 我 们 就 得 到 了 下 面 的 代码 : 
if (Notification.permission === "granted") { 
showNotification(); 
} else if (Notification.permission === "denied") { 
console.log("Can't show notification"); 
} else if (Notification.permission === "default") { 
Notification.requestPpermission().then(function(permission) { 
if (permission === "granted") { 
showNotification(); 
} else if (Notification.permission === "denied") { 
console.log("Can't show notification"); 
} else if (Notification.permission === "default") { 


console.log("Can't show notification, but can ask for permission again."); 


} 
]); 
} 





虽然 在 许多 情况 下 ， 在 决定 如 何 处 理 之 前 ， 你 需要 先 使 用 Notification.permission 检查 当 
前 的 权限 状态 (如 上 述 代码 )， 但 在 其 他 情况 下 ， 你 只 需要 调用 requestPermission()， 并 
相信 浏览 器 只 会 在 必要 时 显示 权限 许可 对 话 框 。 这 样 我 们 可 以 将 上 述 的 代码 示例 简化 
如 下 : 


Notification.requestPermission().then(function(permission) { 








if (permission === "granted") { 
showNotification(); 
} else if (Notification.permission === "denied") { 
console.log("Can't show notification"); 
} else if (Notification.permission === "default") { 
console.log("Can't show notification, but can ask for permission again."); 
} 
]); 





同 源 策略 

用 户 的 选择 是 根据 同 源 策略 保存 的 。 换 向 话说 ,一旦 用 户 授予 权限 ， 你 就 可 以 在 应 用 
中 同 源 的 任何 页 面 下 创建 新 的 通知 。 

如 果 两 个 Web 页 面 的 URI 协 议 (例如 HTTPS、HTTP)、 主 机 名 (例如 www .talater.com) 
和 么 口号 都 一 致 ， 那 么 这 两 个 页 面 就 是 同 源 的 。 例 如 ， 在 https://www .talater.com/annyang 
授予 的 权限 ， 可 以 在 httpsWwww.talater.com/upup 上 使 用 ， 但 是 不 能 在 http://www .talater. 
com/annyang (使 用 HITP， 而 权限 授予 在 HITPS 协议 上 ) 或 者 https://www.talater. 
com:8443/ (闸口 号 不 一 致 ) 上 使 用 。 














10.2.2 ”显示 通知 
一 旦 获得 了 用 户 的 许可 ， 创 建 通知 就 是 创建 一 个 新 的 Notification 对 象 。 让 我 们 来 试 一 试 ， 


Notification.requestPermission().then(function(permission) { 


if (permission === "granted") { 
new Notification("Shiny"); 
} 
]); 





如 果 你 在 浏览 器 控制 台中 运行 这 段 代 码 ， 应 该 会 向 你 请 求 显示 通知 的 权限 ， 紧 接着 显示 一 
条 标题 名 为 Shiny 的 简单 通知 ( 见 图 10-4)。 
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10-4: 可 能 是 最 简单 的 桌面 通知 


修改 通知 设置 权限 

如 果 你 没有 看 到 权限 许可 对 话 框 ， 可 能 是 因为 之 前 你 拒绝 或 者 授权 过 这 个 站 
一 旦 你 在 权限 许可 对 话 框 中 做 出 了 选择 ， 浏 览 器 就 会 记 住 选择 ， 并 且 不 会 在 
这 个 源 中 再 次 显示 通知 权限 许可 对 话 框 。 在 开发 过 程 中 ， 可 能 你 需要 不 时 地 
重 设 这 个 设置 。 
在 桌面 版 Chrome 中 ， 可 以 通过 点 击 地 址 栏 网 站 URL 左 侧 的 图 标 ， 并 更 改 通 
知 的 设置 来 完成 。 在 安 卓 版 Chrome 中 ， 可 以 打开 浏览 器 菜单 ， 选 择 设置 ， 
点 击 网 站 设置 ， 然 后 找到 同样 的 设置 项 。 








































































































不 幸 的 是 ， 虽 然 上 述 代码 在 桌面 端 可 以 正常 运行 ， 但 是 在 移动 设备 上 是 不 能 正常 工作 的 。 
要 理解 原因 ， 先 要 考虑 移动 端的 通知 是 如 何 表现 的 。 当 页 面 创建 通知 上 时， 它 会 在 浏览 器 外 
部 泻 染 ， 也 就 是 在 操作 系统 层面 上 渲染 。 通 知 可 能 会 维持 可 见 ， 用 户 可 能 会 在 离开 网 站 很 
久之 后 才 与 它 进行 交互 。 为 了 确保 我 们 可 以 捕捉 到 用 户 与 通知 的 交互 ， 通知 需 要 “去 留 ” 
在 更 高 的 级 别 service worker 中 。 

要 创建 可 以 同时 在 桌面 端 和 移动 端 工作 的 通知 ， 就 需要 通过 service worker 来 创建 。 幸 运 的 
是 ， 使 用 service worker 的 registration 对 象 ， 你 甚至 不 需要 修改 service worker 的 代码 ， 
就 能 轻松 地 在 页 面 中 完成 这 一 操作 。 


只 需要 对 代码 稍 作 修 改 ， 我 们 就 可 以 在 service worker 的 registration 对 象 上 调用 service 
worker。 它 接收 的 参数 和 Notification 对 象 方法 完全 相同 。 












































Notification.requestPermission().then(function(permission) { 
if (permission === "granted") { 


navigator .serviceWorker .ready.then(function(registration) { 
registration.showNotification("Shiny"); 
]); 
站 
]); 


这 种 移动 端 友好 的 语法 在 移动 设备 和 桌面 都 可 以 良好 地 运行 〈 见 图 10-5)。 从 这 一 点 上 讲 ， 
我 们 的 代码 只 需要 使 用 这 种 语法 即 可 。 在 你 自己 的 应 用 中 ， 可 能 你 会 希望 同时 使 用 两 种 语 
法 ， 以 同时 支持 现代 浏览 器 和 不 支持 service worker 的 浏览 器 。 
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图 10-5:; 可 能 是 最 简单 的 移动 端 通知 


现在 我 们 已 经 知道 如 何 创建 一 个 简单 的 通知 ， 下 面 来 看 看 一 些 额 外 的 选项 ， 它 们 可 以 改进 
我 们 的 通知 。 


navigator .serviceWorker .ready.then(function(registration) { 
registration.showNotification("Quick Poll", { 
body: "Are progressive web apps awesome?", 
icon: "/img/reservation-gih.jpg", 
badge: "/img/icon-hotel.png", 
tag: "awesome-notification", 
actions: [ 
{action: "confirm1", title: "Yes", icon: "/img/icon-confirm.png"}, 
{action: "confirm2", title: "Hell Yes", icon: "/img/icon-cal.png"} 
] ， 
vibrate:[500,110 ,500 ,110 ,450 ,110 ,200 ,110 ,170 ,40 ,450 ,110 ,200 ,110 ,170 ,40 ,500] 
]); 
]); 





更 新 后 的 代码 演示 了 showNotification() 如 何 接收 一 个 可 选 的 第 二 参数 ， 其 中 包含 了 一 个 
选项 对 象 。 这 些 选 项 可 以 用 来 进一步 定制 和 修改 通知 的 行为 。 

以 下 是 在 创建 通知 时 ， 你 可 以 使 用 的 所 有 选项 。registration.showNotification() 和 new 
Notification() 这 两 种 用 法 都 支持 这 些 选 项 。 
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body 
通知 正文 中 的 文本 内 容 。 
icon 


将 在 通知 中 显示 的 图 片 URL 地 址 (在 图 10-6 中 对 应 城市 的 图 片 )。 
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图 10-6: 丰富 移动 庙 推 关 
badge 


用 来 代表 发 送 通知 的 应 用 的 图 片 URL， 或 者 是 代表 应 用 发 送 的 通知 类 别 。 例 如 ， 消 息 
应 用 可 能 总 是 使 用 它 的 微 标 作为 所 有 通知 的 标记 ， 也 可 能 会 选用 不 同 的 图 标 来 代表 不 同 
的 通知 ， 例 如 : 新 消息 通知 使 用 一 种 图 标 ， 而 用 户 名 被 提 及 时 使 用 另 一 种 图 标 。 当 没有 
显示 整个 通知 的 空间 时 ， 或 者 在 通知 内 部 (如 图 10-6 中 图 标的 右 下 角 所 示 )， 都 有 可 能 
会 显示 这 个 标记 。 


























actions 


通过 传人 一 个 操作 对 象 数 组 ， 你 可 以 给 通知 添加 两 个 按钮 ， 让 用 户 可 以 直接 在 通知 上 执 
行 操作 。 这 可 以 让 用 户 快速 启动 你 的 Web 应 用 ， 其 至 可 以 在 不 打开 应 用 的 情况 下 ， 直 
接 从 通知 中 快速 进行 操作 。 例 如 ， 消 息 应 用 中 的 新 消息 通知 可 以 包含 一 个 点 赞 按钮 和 一 
个 回复 按钮 。 点 赞 按 钮 可 以 在 不 打开 应 用 的 情况 下 工作 ， 而 回复 按钮 需要 打开 消息 应 用 
并 显示 合适 的 页 面 。 我 们 会 在 10.5 节 中 进一步 了 解 这 些 操作 。 


vibrate 


对 于 支持 振动 的 设备 ， 你 可 以 自 定义 振动 模式 ， 使 用 这 个 模式 提醒 用 户 收 到 了 这 个 新 通 
知 。vibrate 接收 一 个 整 型 数组 ， 每 个 数字 以 毫秒 数 为 单位 ， 描 述 了 振动 和 和 暂停 的 时 间 。 
例如 ，[269,169,306] 表示 振动 200 毫秒 ， 暂 停 100 毫秒 ， 然 后 再 振动 300 毫秒 。 在 上 
述 代码 示例 中 ， 振 动 设置 会 播放 《帝国 进行 曲 》 的 节奏 。 

tag 


表示 这 个 通知 的 唯一 标识 符 。 如 果 这 个 标签 等 于 当前 正在 显示 的 通知 的 标签 ， 那 么 新 通 
知 会 静默 奉 代 旧 通 知 。 这 样 做 通常 比 创建 多 个 通知 来 打扰 用 户 更 加 可 取 。 例 如 ， 如 果 用 
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户 在 我 们 的 消息 应 用 中 有 一 条 未 读 消息 ， 我 们 可 能 想 要 在 通知 中 包含 消息 文本 。 如 果 在 
新 通知 发 送 之 前 已 经 有 五 条 消息 到 达 了 ， 那 么 将 通知 内 容 改 为 “你 有 6 条 新 消息 ”， 会 
比 起 展示 6 条 通知 更 加 合理 。 


下 面 的 代码 展示 了 如 何 创建 一 条 通知 ， 并 且 每 隔 一 秒 静 默 更 新 一 条 新 通知 ， 其 中 包含 了 
不 同 的 文本 。 这 样 做 可 以 有 效 地 实现 一 个 带 有 计时 器 的 通知 : 


navigator .serviceWorker .ready.then(function(registration) { 
var count = 1; 
var createNotification = function() { 
registration.showNotification("Counter", { 
body: count, 
tag: "counter-notification" 
]); 


Count += 1; 


























}; 


setInterval(createNotification, 1000); 
]); 
如 果 你 将 标签 删除 ， 或 者 在 每 次 友 代 时 修改 标签 ， 那 么 六 览 器 就 会 创建 多 条 通知 。 
renotify 


正如 我 们 刚才 看 到 的 ， 如 果 使 用 相同 的 标签 来 更 新 现 有 的 通知 ， 则 新 的 通知 会 悄然 取代 
旧 的 通知 。 通 过 设置 renotify 属性 为 true， 你 就 可 以 在 更 新 通知 时 ， 人 迫使 设备 吸引 用 
户 的 注意 (在 移动 设备 上 ， 这 是 通过 再 次 振动 手机 完成 的 ) 。 
data 
可 以 用 来 附加 任何 想 要 伴随 通知 发 送 的 数据 。 在 本 章 的 后 面 ， 我 们 会 看 到 如 何 对 通知 寻 
件 做 出 响应 ， 并 获取 这 些 数据 (参见 10.5 节 )。 
dir 
定义 了 在 通知 中 显示 文本 的 方向 。 上 默认 情况 下 ， 它 采用 的 是 浏览 器 语言 设置 ， 但 是 也 可 
以 强制 设置 为 rtL (用 于 从 右 到 左 的 语言 ， 例 如 阿拉 伯 语 和 和 希 伯 来 语 ) 或 者 是 Ltr (用 
于 从 左 到 右 的 语言 ， 例 如 英语 和 葡萄牙 语 )。 
Lang 
通知 文本 的 主要 语言 。 例 如 ，en-US 对 应 美式 英语 ， 而 pt-BR 对 应 巴西 葡萄 牙 语 。 
noscreen 
一 个 布尔 值 ， 用 来 指定 设备 的 屏幕 是 否 会 被 这 个 通知 打开 。 如 果 设 置 为 true， 那 么 屏幕 
就 不 会 被 打开 。 在 本 书 编写 时 ， 还 没有 任何 浏览 器 支持 这 一 属性 ， 使 用 默认 值 false。 
silent 
一 个 布尔 值 ， 用 来 指定 通知 是 否 静 默 ( 即 没 有 振动 或 者 声音 )。 在 本 书 编写 时 ， 还 没有 
任何 浏览 器 支持 这 一 属性 ， 使 用 默认 值 false 〈 非 静默 ) 。 
sound 
在 创建 通知 时 ， 用 于 播放 的 音频 文件 URL。 在 本 书 编写 时 ， 还 没有 任何 麟 览 器 支持 这 
一 属性 。 
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通知 试验 场 

如 果 你 想 要 尝试 使 用 通知 ， 可 以 用 你 喜欢 的 代码 编辑 器 打开 /public/notifications. 
html， 并 在 <script> 标签 中 进行 修改 。 接 下 来 ， 在 开发 服务 器 运行 的 情况 下 
(参见 2.4 节 )， 在 浏览 器 中 打开 http://localhost:8443/notifications.html 即 可 。 














10.2.3 为 哥 谭 帝国 酒店 添加 通知 支持 


让 我 们 继续 为 哥 谭 帝国 酒店 Web 应 用 添加 通知 。 我 们 的 目标 是 : 当 用 户 在 哥 谭 帝国 酒店 
发 起 新 预订 时 ， 向 用 户 请 求 发 送 通知 的 权限 。 如 果 用 户 授予 我 们 权限 ， 就 立即 显示 一 条 通 
知 ， 让 用 户 知道 ， 当 他 的 预订 状态 发 生 任何 变化 时 ， 都 能 收 到 新 状态 的 通知 。 


在 my-account.js 中 添加 下 列 代 码 ， 放 在 addReservation() 函数 定义 的 上 方 即 可 : 


var showNewReservationNotification = function() { 
navigator .serviceWorker .ready.then(function(registration) { 
registration.showNotification("Reservation Received", { 
body: 
"Thank you for making a reservation with Gotham Imperial Hotel.\n"+ 
"You will receive a notification if there are any changes to "+ 
"the reservation.", 
icon: "/img/reservation-gih.jpg", 
badge: "/img/icon-hotel.png", 
tag: "new-reservation" 
]); 
})); 
}; 











var offerNotification = function() { 
if ("Notification" in window && 
"serviceWorker" in navigator) { 
Notification.requestPermission().then(function(permission){ 


if (permission === "granted") { 
showNewReservationNotification(); 
} 
]); 
} 
}; 


我 们 的 代码 定义 了 两 个 新 函数 。 
showNewReservationNotification() 
当 用 户 创建 新 预订 时 ， 显 示 一 条 新 通知 。 这 个 函数 会 假设 用 户 已 经 授权 应 用 显示 通知 。 
offerNotification() 
确保 当前 浏览 器 中 支持 service worker 和 和 Notification API。 然 后 继续 请 求 显示 通知 的 权 
限 ， 如 果 权 限 被 授予 ， 就 使 用 showNewReservationNotification() 显示 通知 。 


接 下 来 我 们 要 调用 新 的 函数 。 依 然 是 在 my-account.js 中 ， 修 改 addReservation 函数 ， 在 创 
建新 预订 后 ， 添 加 一 个 showNewReservationNotification() 的 调用 : 











var addReservation = function(id, arrivalDate, nights, guests) { 
var reservationDetails = { 


id: id, 
arrivalDate: arrivalDate, 
nights: nights, 
guests: guests ， 
status: "Sending" 

}; 


addToObjectStore("reservations", reservationDetails); 
renderReservation(reservationDetails); 
if ("serviceWorker" in navigator && "SyncManager" in window) { 
navigator .serviceWorker .ready.then(function(registration) { 
registration.sync.register("sync-reservations"); 
]); 
} elLse { 
$.getJSON("/make-reservation", reservationDetails, function(data) { 
updateReservationDisplay(data); 
]); 
} 
showNewReservationNotification(); 


}; 


现在 ， 每 当 用 户 发 起 预订 时 ，addReservation() 函数 就 会 向 用 户 请 求 发 送 通 知 的 权限 (如 
果 尚 未 授权 ) ， 然 后 显示 一 条 新 通知 ( 见 图 10-7)。 
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图 10-7: 新 预订 通知 


» Mw Ve as 
10.3 为 用 户 订 阅 推送 事件 
现在 我 们 已 经 发 送 了 第 一 条 通知 ， 并 取得 了 很 大 的 进展 。 但 是 为 了 能 真正 让 用 户 受 益 ， 我 
们 要 在 用 户 离开 应 用 之 后 向 他 们 发 送 通知 。 为 此 ， 我 们 要 转 而 使 用 Push API。 
让 我 们 再 次 看 看 订阅 的 过 程 〈 见 图 10-8)。 











158 | 第 10 章 




















图 10-8: 创建 并 存储 推送 订阅 


首先 ， 我们 的 脚本 要 联系 消息 服务 器 ， 要 求 服务 器 为 用 户 创建 新 的 订阅 。 消 息 服 务 器 随后 
会 将 新 订阅 保存 下 来 ， 并 使 用 新 订阅 的 详情 来 响应 我 们 的 请 求 。 接 下 来 ， 我 们 的 脚本 要 将 
订阅 详情 储存 到 我 们 的 服务 器 ， 以 便 我 们 可 以 在 随后 使 用 它 来 发 送 消 息 。 

在 开始 创建 和 存储 订阅 的 过 程 之 前 ， 我 们 要 先 花 点 时 间 来 讨论 加 密 。 别 担心 ， 这 不 会 花 太 
长 时 间 。 

当 为 用 户 订 阅 推送 消息 时 ， 消 息 服务 器 返回 的 订阅 详情 对 象 中 ， 包 含 了 向 用 户 发 送 无 限 条 
消息 所 需 的 所 有 信息 。 如 果 任 何 恶 意 实 体 通过 服务 器 获取 到 订阅 详情 ， 或 者 浏览 器 中 的 任 
何 恶 意 脚本 或 者 播 件 在 用 户 订阅 时 读 取 了 详情 数据 ， 它 们 就 可 以 随心 所 欲 地 向 你 的 用 户 发 
送 任何 消息 了 。 


为 了 确保 只 允许 你 的 服务 器 发 送 消 息 ， 消 息 服务 器 只 会 接受 使 用 存储 在 服务 器 上 的 秘密 私 
钥 签 名 的 消息 。 要 验证 消息 是 否 由 正确 的 密 钥 签名 ， 每 个 私 钥 都 会 有 对 应 的 公 钥 。 这 个 公 
钥 会 包含 在 你 的 脚本 中 ， 在 创建 新 订阅 时 ， 公 钥 会 一 并 发 送 给 消息 服务 器 。 随 后 ， 公 钥 会 
连同 订阅 详情 一 起 存储 在 消息 服务 器 中 。 这 个 密 钥 仅 会 用 来 验证 :从 服务 器 发 送 给 消息 服 
务 器 的 消息 ， 是 否 由 正确 的 私 钥 签 名 了 。 

你 可 以 把 私 钥 看 作 是 一 个 只 有 你 的 服务 器 拥有 的 皇家 印章 ， 它 可 以 用 来 给 消息 签名 ， 以 证 
明 消 息 是 来 自 于 你 们 皇家 的 。 另 一 方面 ， 公 钥 是 任何 人 都 可 以 访问 的 工具 。 它 不 能 用 来 签 
署 消 息 ， 只 是 用 来 鉴别 消息 是 否 确实 是 通过 正确 的 皇室 印章 所 签署 的 。 

让 我 们 用 简单 的 话语 描述 一 下 整个 过 程 : 
(了 ) 创建 应 用 时 ， 生 成 一 个 公 钥 和 一 个 私 钥 ， 

(2) 私 钥 是 保密 的 ， 保 存在 服务 器 中 ， 

(3) 公 钥 会 包含 在 脚本 中 ， 并 在 创建 订阅 时 被 发 送 到 消息 服务 器 ， 

(4) 消息 服务 器 将 公 钥 连同 其 他 订阅 详情 一 起 存储 起 来 ， 

(5) 当 服 务 器 要 发 送 消息 时 ， 使 用 私 钥 进行 签名 ， 随 后 发 送 到 消息 服务 器 ; 

(6) 消息 服务 器 使 用 公 铀 验证 消息 是 否 用 正确 的 私 钥 签名 ， 如 果 是 ， 则 将 消息 发 送 给 用 户 。 















































看 完 上 述 这 些 步骤 ， 你 就 可 以 发 现 ， 在 开始 创建 订阅 和 发 送 推送 消息 之 前 ， 我 们 需要 生成 
一 个 公 钥 和 私 钥 对 。 


10.3.1 生成 VAPID 公 钥 和 私 外 


用 于 签名 和 验证 推送 消息 的 密 钥 称 为 VAPID 密 钥 。VAPID 是 “自愿 的 Web 推送 应 用 服务 
器 身份 证 明 ”(Voluntary Application Server Identification for Web Push) ， 这 个 创造 性 的 名 字 
和 密码 学 并 非 密 切 相 关 。 
为 了 让 事情 尽 可 能 简单 ， 我 们 不 会 深入 研究 背后 的 密码 学 细节 、 生 成 VAPID 密 钥 的 详情 ， 
以 及 如 何 为 负载 签名 。 相 反 ， 我 们 将 使 用 一 个 更 常用 的 Web 推送 工具 库 来 隐藏 这 种 复杂 
性 。 本 书 使 用 了 Node.js 的 web-push 库 ， 但 你 也 可 以 找到 其 他 许多 语言 的 类 似 工具 库 。 
首先 ， 我 们 要 在 项 目 中 安装 web-push 库 。 在 项 目的 根 目录 下 ， 在 命令 行 中 运行 下 列 代 码 ， 
安装 web-push 并 将 其 添加 到 项 目的 依赖 列表 中 : 

npm install web-push --save-dev 
接 下 来 使 用 web-push 来 生成 一 个 公 钥 和 一 个 私 钥 。 
在 项 目 中 创建 一 个 名 为 generate-keys.js* 文件 ， 并 在 其 中 输入 下 列 代码 : 


var webpush = require("web-push"); 
console. log( 

webpush .generateVAPIDKeys() 

); 


接 下 来 在 命令 行 中 执行 这 个 文件 : 
node generate-keys.js 
这 应 该 能 输出 一 个 新 的 私 钥 和 一 个 公 钼 到 控制 台中 : 


$ node generate-keys.js 
{ publicKkey: 'yteswBFEx-JuJhyU7XsteR7x0o3nqygyR ' ， 
privateKey: 'IUKbrkM4inNv2MzLzVRDV4YRw4N65N' } 


你 需要 把 这 些 密 钥 保存 到 安全 的 地 方 。 

对 于 哥 谭 帝 国 酒店 ， 我 选择 把 私 钥 和 公 钥 一 同 保存 在 /server 目录 的 push-keys.js 文件 中 。 
你 可 能 还 会 注意 到 ， 我 已 经 把 这 个 文件 添加 到 项 目的 .gitignore 文件 中 。 这 意味 着 当 我 提交 
代码 时 ， 私 钥 不 会 被 传 到 线 上 。 你 应 该 小 心 保管 你 的 私 钥 。 

为 了 方便 起 见 ， 我 在 /server 目录 中 包含 了 一 个 名 为 generate-push-keysjs 的 文件 。 运 行 这 
个 脚本 时 ， 脚 本 会 为 你 生成 一 个 新 的 push-keys.js 文件 ， 并 将 新 的 密 钥 保 存在 内 。 

现在 你 已 经 知道 如 何 生 成 自己 的 密 钥 了 ， 可 以 删除 刚才 创建 的 generate-keys.js 文件 ， 并 在 
命令 行 中 运行 下 列 命 令 ， 从 而 运行 generate-push-keys.js: 






























































node server/generate-push-keys.js 


这 条 命令 会 为 你 创建 一 个 新 的 密 钥 对 ， 并 保存 在 push-keys.js 文件 中 ， 如 下 一 节 所 示 。 该 
文件 会 在 稍 后 被 用 于 向 服务 端 发 送 消息 。 
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10.3.2 ”生成 GCM 密 钥 

不 幸 的 是 ， 仅 仅 使 用 VAPID 密 钥 不 足以 向 所 有 的 浏览 器 发 送 推送 消息 。 

在 Web 推送 协议 最 终 确定 下 来 且 VAPID 达成 协议 之 前 ， 一 些 浏 览 器 走 在 了 前 头 ， 通 过 
非 标 准 的 方式 实现 了 推送 消息 。Chrome 在 版 本 42 到 51 之 间 使 用 了 谷歌 云 消息 (Google 
Cloud Messaging，GCM) 来 传递 推送 消息 ， 而 且 Opera 和 三 星 浏览 器 也 采用 了 相同 的 实 
现 。 为 了 使 推送 通知 也 能 够 在 这 些 浏 览 器 的 旧版 本 上 工作 ， 除 了 VAPID 密 钥 之 外 ， 你 还 
需要 生成 GCM API 密 钥 。 


你 可 以 通过 谷歌 的 Firebase 云 消息 接口 (过 去 称 为 谷歌 云 消息 ) 获取 GCM API 密 钥 (又 
名 FCM API 密 钥 )。 


(1) 从 https://pwabook.com/rebaseconsole 登录 Firebase 控制 台 。 

(2) 使 用 谷歌 账号 登录 。 

(3) 创建 新 项 目 。 

(4) 在 项 目 页 面 ， 点 击 项 目 名 称 旁 边 的 设置 图 标 ， 进 入 项 目 设置 页 。 

(35) 在 项 目 设置 中 点 击 “Cloud messaging”。 

(6) 你 应 该 能 够 看 到 一 个 项 目 凭 据 (Project credentials) 区 域 ， 其 中 有 一 个 生成 密 钥 的 链接 。 
点 击 生 成 密 钥 ， 你 就 能 得 到 属于 自己 的 GCM 服务 端 密 钥 以 及 发 送 人 ID ( 见 图 10-9)。 
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图 10-9: 在 Firebase 控制 台中 生成 GCM 密 钥 


在 /server 目录 中 打开 push-keys.js 文件 ， 并 将 GCMAPIKey 的 值 设置 为 你 刚才 生成 的 GCM 服 
务 端 密 钥 值 。 与 此 同时 ， 输 入 服务 端 管 理 员 的 邮箱 地 址 ， 或 者 可 以 联系 到 你 的 URL (这 样 
消息 服务 器 需要 联系 消息 发 送 者 时 就 有 了 联系 方式 )。 


修改 后 的 push-keys.js 文件 应 该 如 下 所 示 (但 是 密 钥 的 值 不 同 ) : 


module.exports = { 
GCMAPIKey: "yBtCa6LClbdSb5dsPCuKM-hqx9WmOstWnvoFoh4", 
subject: "mailto:tal@talater.com", 
publicKkey: "yteswBFEX-U7XsteR7x003nqygyR"， 
privateKey: "IUKbrkM4inNv2MzLZzVRDV4YRw4N65N" 

}; 














现在 服务 器 知道 了 GCM 服务 器 密 钥 ， 是 时 候 将 GCM 发 送 者 的 ID 添加 到 客户 端 ， 以 便 用 
来 创建 新 的 订阅 。 

在 /public 目录 中 编辑 网 站 的 manifest.json 文件 ， 添 加 一 个 新 的 设置 项 ， 键 名 为 gcm_ 
sender_ id， 其 值 等 于 GCM 发 送 者 ID。 








"short_name": "Gotham Imperial", 
"name": "Gotham Imperial Hotel", 
"description": "Book your next stay, manage reservations, and explore Gotham", 
"start_url": "/my-account?utm source=pwa", 
"display": "fullscreen", 
"icons": [ 
上 
"src": "/img/app-icon-192.png", 
"type": "image/png", 
"sizes": "192x192" 
]， 
{ 
"src": "/img/app-icon-512.png", 
"type": "image/png", 
"sizes": "512x512" 
} 
]， 


"theme_color": "#242424" ， 

"background_color": "#242424"， 

"gcm_sender_id": "3217212971" 
} 


现在 让 我 们 回 到 编码 当中 。 


10.3.3 创建 新 订阅 

现在 ， 我 们 已 经 把 基础 打 好 了 ， 终 于 可 以 将 注意 力 转 回 到 浏览 器 ， 订 阅 用 户 推送 消息 了 。 
我 们 可 以 使 用 service worker 的 registration 对 象 ， 得 到 PushManager 接口 。 这 个 接口 中 
包含 了 一 系列 的 实用 方法 ， 包 括 获取 现 有 的 订阅 (getSubscription())、 检 查 当 前 页 面 是 
否 有 权限 订阅 推送 消息 (permissionState())， 最 重要 的 是 subscribe() 方法 ， 它 可 以 用 来 
订阅 用 户 推 送 消 息 。 所 有 的 这 些 方 法 都 会 返回 promise: 


var subscribeOptions = { 
userVisibleOnly: true 






































}; 


navigator .serviceWorker .ready.then(function(registration) { 
return registration.pushManager.subscribe(subscribeOptions); 
}).then(function(subscription) { 
console.log(subscription); 


}); 


代码 一 开始 定义 了 一 个 订阅 选项 对 象 ， 其 中 只 包含 了 一 项 设置 userVisibleOonly。 这 
个 设置 项 意味 着 所 有 推送 消息 必须 对 用 户 可 见 ( 即 代表 你 同意 为 每 个 推送 消息 生成 通知 )。 

















由 于 在 用 户 不 知情 的 情况 下 ， 在 service worker 中 接受 消息 可 能 会 危及 用 户 隐私 ， 所 以 目 
前 没有 浏览 器 支持 把 userVisibLe0ntLy 设置 为 false。 如 果 你 试图 在 创建 订阅 时 ， 没 有 将 这 
个 值 设置 为 true， 那 么 消息 服务 器 就 会 返回 错误 。 


接 下 来 ， 代 码 获 取 了 service worker 的 registration 对 象 ， 随 后 在 这 个 对 象 上 调用 了 
pushManager 的 subscribe() 方法 (传人 订阅 选项 对 象 )。 这 个 方法 会 返回 一 个 promise， 
promise 完成 时 ， 会 得 到 从 消息 服务 器 返回 的 订阅 详情 对 象 。 


由 于 这 段 代 码 中 没有 包含 VAPID 密 钥 ， 它 只 能 够 在 支持 通过 GCM 发 送 消 息 的 浏览 器 中 订 
阅 用 户 ， 并 且 是 在 manifestjson 文件 中 引入 了 GCM 发 送 者 ID 的 前 提 下 。 


让 我 们 来 看 看 ， 采 用 VAPID (如 果 支 持 ) 并 且 在 不 支持 VAPID 的 情况 下 回 退 到 GCM 的 
做 法 : 


var urlBase64ToUint8Array = function(base64String) { 
var padding = "=" .repeat((4 - base64String.Length % 4) % 4); 
var base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/"); 
var rawData = window.atob(base64); 
var outputArray = new Uint8Array(rawData.Tlength); 
for (var i = 0; i < rawData.Length; ++i) { 
outputArray[i] = rawData.charCodeAt(i); 
} 
return outputArray; 


}; 


























var subscribeOptions = { 
userVisibleOnly: true, 
applicationServerKey: urlBase64ToUint8Array("yteswBFEX-U7XsteR7x0o03nqygyR") 
}; 


navigator .serviceWorker .ready.then(function(registration) { 
return registration.pushManager .subscribe(subscribeOptions); 
}).then(function(subscription) { 
console.log(subscription); 


}); 
让 我 们 自 下 而 上 看 看 这 段 代 码 。 
首先 我 们 修改 了 订阅 选项 对 象 (subscribe0ptions)， 让 其 接收 第 二 个 设置 项 ， 名 为 
applicationServerKey， 其 中 包含 了 你 的 VAPID 公 钥 (将 代码 中 的 随机 字符 串 殖 换 成 你 的 
公 钥 )。 不 幸 的 是 ，pushManager 不 能 直接 接受 VAPID 密 钥 ， 我 们 需要 将 密 钥 转换 成 它 能 
理解 的 格式 。 转 换 的 方式 取决 于 代码 顶部 的 urlBase64ToUint8Array() 函数 。 这 个 函数 将 
VAPID 公 钥 转换 成 pushManager 所 需 的 Uint8Array 类 型 。 除 非 你 深切 地 关心 密码 学 ， 否 则 
不 需要 深入 研究 它 的 工作 原理 。 只 需要 知道 用 一 个 包含 你 的 VAPID 公 钥 的 字符 串 来 调用 
它 ， 它 就 会 返回 pushManager 能 够 理解 的 数组 。 
除了 我 们 优雅 忽略 的 urtlBase64ToUint8Array() 复杂 性 之 外 ， 剩 余 的 代码 并 没有 发 生 太 大 的 
变化 。 唯 一 的 补充 就 是 在 设置 对 象 中 添加 的 第 二 个 属性 ， 其 中 包含 了 我 们 的 VAPID 公 钥 。 
就 是 这 样 ! 现在 用 户 已 经 被 订阅 了 推送 消息 ， 你 可 以 在 subscription 变量 中 获取 订阅 
详情 。 















































此 时 ， 你 可 以 使 用 Ajax 或 者 fetch 调用 ， 将 订阅 对 象 发 送 到 服务 器 ， 以 备 将 来 使 用 。 
现在 我 们 了 解 了 如 何 创建 订阅 ， 让 我 们 在 应 用 里 实现 这 一 点 。 


10.3.4 为 哥 谭 帝国 酒店 用 户 订 阅 推送 消息 


在 本 章 前 面 ， 我 们 为 可 谭 帝 国 酒店 应 用 添加 了 通知 的 支持 一 一 一 旦 用 户 发 起 预订 ， 我 们 就 
向 他 请 求 发 送 通 知 的 权限 。 


现在 ， 让 我 们 来 修改 那 段 代码 ， 为 授权 发 送 通 知 的 用 户 同 时 创建 新 的 推送 i 订阅， 并 将 订阅 
保存 到 服务 器 


在 my-account.js 中 ， 修 改 offerNotification() 函数 : 




















var offerNotification = function() { 
if ("Notification" in window && 
"PushManager" in window && 
"serviceWorker" in navigator) { 
subscribeUserToNotifications(); 
} 
}; 


我 们 在 offerNotification() 中 做 了 两 处 修改 。 首 先 给 if 语句 添加 了 另 一 个 条 件 ， 以 确保 
浏览 器 支持 PushManager。 接 下 来 将 请 求 通知 权限 并 为 用 户 订 阅 推送 事件 的 所 有 逻辑 ， 提 
取 到 subscribeUserToNotifications()， 这 是 我 们 接 下 来 要 编写 的 另 一 个 新 函数 。 


修改 addReservation() 国 数 的 最 后 一 行 ， 让 其 调用 offerNotification() 而 不 是 showNewR 
eservationNotification()。 你 还 可 以 把 showNewReservationNotification() 的 代码 也 删除 
掉 ， 因 为 我 们 不 再 需要 显示 那 条 通知 了 一 一 取而代之 ,一旦 服务 器 确认 了 预订 ， 我 们 就 会 
推送 消息 显示 通知 。 

最 后 ， 我 们 在 offerNotification() 函数 的 上 面 ， 添 加 下 列 代码 : 


var urlBase64ToUint8Array = function(base64String) { 
var padding = "=".repeat((4 - base64String.length % 4) % 4); 
var base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/"); 
var rawData = window.atob(base64); 
var outputArray = new Uint8Array(rawData.Length ) ; 
for (var i = 0; i < rawData.length; ++i) { 
outputArray[i] = rawData.charCodeAt(i); 
} 
return outputArray; 


}; 



































var subscribeUserToNotifications = function() { 
Notification.requestPermission().then(function(permission){ 
if (permission === "granted") { 
var subscribeOptions = { 
userVisibleOnly: true, 
applicationServerKey: urlBase64ToUint8Array( 
"yteswBFEX-U7XsteR7x0o3nqygyR”// 替换 为 你 的 公 钥 





navigator .serviceWorker .ready.then(function(registration) { 
return registration.pushManager .subscribe(subscribe0ptions ); 
}).then(function(subscription) { 
var fetchOptions = { 
method: "post", 
headers: new Headers({ 
"Content-Type": "application/json" 


})， 
body: JSON.stringify(subscription) 


return fetch("/add-subscription", fetchOptions); 
DD; 
} 
DD; 
}; 


这 段 代码 从 我 们 熟悉 的 urlBase64ToUint8Array() 国 数 开始 。 

接 下 来 ， 我 们 定义 了 subscribeUserToNotifications() 函数 。 这 个 函数 会 请 求 通知 权限 ， 
如 果 成 功 获 取 权 限 ， 就 会 创建 新 的 预订 并 发 送 给 服务 器 。 

它 先 调用 Notification.requestPermission()， 向 用 户 请 求 权限 ， 并 返回 一 个 promise。 
如 果 promise 完成 ， 首 先 我 们 要 检查 权限 是 否 被 授予 。 接 下 来 ， 我 们 定义 了 订阅 选项 ， 
applicationServerKey 设置 为 VAPID 公 钥 ， 而 userVisibLeontLy 设置 为 true。 要 确保 这 
里 使 用 的 是 你 自己 的 VAPID 公 钥 ， 可 以 在 server/push-keys.js 获得 。 接 下 来 ， 我 们 使 用 
navigator .serviceWorker.ready 获取 了 service worker 的 registration 对 象 ， 使 用 该 对 象 
的 pushManager 调用 subscribe()。 当 这 个 promise 完成 后 ， 下 一 个 then 语句 块 就 会 运行 ， 
此 时 用 户 已 经 授予 了 权限 ， 并 且 我 们 成 功 向 用 户 订 阅 了 推送 消息 。 

现在 我 们 要 做 的 就 是 将 订阅 详情 发 送 到 服务 器 ， 并 保存 到 数据 库 中 。 为 此 ， 我 们 创建 一 个 
新 的 fetch 请 求 到 /add-subscription， 设 置 请 求 方法 为 POST， 添加 Content-Type 头 部 并 
设置 值 为 application/json， 让 服务 器 知道 我 们 要 传递 的 是 JSON 数据 ， 最 后 使 用 JSON. 
stringify() 将 订阅 对 象 转换 成 JSON 字符 串 。 
让 我 们 再 看 一 遍 整个 过 程 。 

(1) 确保 浏览 器 支持 service worker、Notification API 和 Push API。 

(2) 请 求 显示 通知 的 权限 ， 只 有 在 授权 成 功 的 情况 下 才 继 续 余下 操作 。 

(3) 使 用 VAPID 公 钥 (经 过 转换 后 )， 通 过 消息 服务 器 创建 新 的 订阅 。 

(4) 一 旦 得 到 订阅 详情 ， 就 将 其 发 送 到 服务 器 并 保管 起 来 。 

现在 我 们 只 剩 下 一 件 事 : 编写 服务 端 代码 ， 将 订阅 详情 保存 到 服务 器 的 数据 库 中 。 这 一 实 
现在 不 同 应 用 之 间 区 别 很 大 ， 并 且 跟 服务 器 保存 和 构造 数据 的 方式 有 关 一 一 但 是 出 发 点 很 
简单 。 通 常 你 可 以 把 订阅 详情 作为 字符 串 存储 到 用 户 表 ， 或 者 保存 到 对 象 存储 中 。 当 你 需 
要 向 用 户 发 送 通知 时 ， 只 需要 读 取 该 字符 串 并 且 将 其 转换 回 对 象 即 可 。 

你 可 以 在 server/index.js 和 server/subscriptions.js 中 看 到 一 个 非常 简单 直接 的 实现 。 由 于 我 
们 的 示例 应 用 中 没有 用 户 的 概念 (只 服务 于 单个 用 户 )， 所 以 我 们 简单 地 把 所 有 订阅 都 保 
存在 一 个 subscriptions 对 象 存 储 中 ， 没 有 与 任何 的 用 户 数据 进行 联系 一 一 在 实际 应 用 中 ， 
你 可 不 会 希望 这 么 做 。 
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10.4 从 服务 端 发 送 推送 事件 
我 们 现在 已 经 准备 好 从 服务 端 发 送 消息 给 用 户 了 。 
VAPID 私 钥 和 公 钥 
用 于 消息 签名 ， 以 及 在 支持 VAPID 的 浏览 器 中 创建 订阅 。 
GCM API 服 务 端 密 钥 和 发 送 者 ID 
在 不 支持 VAPID 的 六 览 器 中 作为 回 进 方案 ， 用 于 消息 签名 和 创建 订阅 。 
订阅 详情 对 象 
从 消息 服务 器 接收 的 对 象 ， 其 中 包含 了 发 送 消 息 给 特定 用 户 订阅 所 需 的 详情 信息 
详情 中 包含 了 公 钥 、 一 个 鉴 权 密 钥 ， 以 及 一 个 端点 一 一 我 们 要 癌 其 发 送 消 息 的 URL。 
消息 
你 要 发 送 的 消息 内 容 ， 可 以 是 简单 的 字符 串 (例如 show-new-message-notification)， 也 
可 以 是 包含 了 更 多 详情 的 对 象 (例如 {msg: "reservation-confirmation"， reservationId: 
19, date: "2021-12-19"})。 
利用 所 有 这 些 细 市 ， 我 们 就 可 以 构建 一 个 消息 服务 器 的 请 求 来 发 送 这 个 消息 了 。 事 情 很 快 
会 变 得 复杂 起 来 ， 因 为 这 涉及 在 请 求 上 设置 一 系列 的 HTTP 头 部 ， 例 如 使 用 JWT (JSON 
Web Token) 的 览 权 头 部 。 
幸运 的 是 ， 我 们 可 以 使 用 web-push 库 再 次 绕 过 这 些 加 密 的 复杂 性 ， 这 样 就 使 得 发 送 消息 
(相对 ) 轻而易举 了 : 


var webpush = require("web-push"); 
























































var pushKeys = { 
GCMAPIKey: "yBtCa6LClbdSbS5dsPCuKM-hqx9WmOstWnvoFoh4", 
subject: "mailto:tal@talater.com", 
publicKey: "yteswBFEX-U7XsteR7x0Qo3nqygyR"， 
privateKey: "IuKbrkM4AinNv2MzlzVRDV4YRw4N65N" 


}; 


var subscription = { 
endpoint: "https://fcm.googleapis.com/fcm/send/dQbqPBPWo_A:AHH91bHyhyrG9", 
keys: { 
p256dh: "BEJ_yK1ixAC8DFrbXjiRKGVxCh8c8FImUyrNbm8rcVVIvDT3an18ab7011Jw="， 
auth: "o-hRay472334PuqppKq-Lg== 
} 
}; 


var message = "show-notification"; 


webpush .setGCMAPIKey(pushKeys.GCMAPIKey ) ; 
webpush.setVapidDetails( 
pushKeys.subject, 
pushKeys .publickey, 
pushKeys .privateKey 





代码 开头 引入 了 web-push 库 。 随 后 我 们 将 前 


) ; 


webpush.sendNotification(subscription, message).then(function() { 
console.log("Message sent"); 

}).catch(function() { 
console.log("Message failed"); 


}); 











看 列 出 的 所 有 细节 引入 进来 : VAPID 和 


GCM 密 钥 、 订 阅 详情 以 及 我 们 的 消息 内 容 。 接 下 来 ， 可 以 使 用 webpush.setGCMAPIKey() 
和 webpush.setVapidDe tails()， 将 这 些 详情 配置 到 web-push 中 。 最 后 ， 使 用 webpush. 
sendNotification() 发 送 消息 ， 传 入 订阅 对 象 和 消息 内 容 。webpush.sendNotificatton() 会 
promise， 如 果 消 息 服务 器 确认 消息 可 以 放 入 队列 等 竺 发送，promise 就 会 成 功 ， 否 则 
如 果 过 程 中 出 现 了 任何 问题 ，promise 就 会 失败 。 


返回 





请 注意 ， 





回 的 





当 消 息 服 务 器 确定 消息 可 以 被 发 送 时 ，webpush.sendNotification() 返 


promise 才 会 完成 。 这 并 不 意味 着 消息 已 经 成 功 发 送 给 用 户 了 。 用 户 可 能 当前 处 于 离线 状 
态 ， 这 种 情况 下 ， 消 息 服务 器 会 继续 尝试 发 送 消息 ,或 者 用 户 甚至 可 能 已 经 撤销 了 应 用 发 
送 通 知 的 权限 (这 种 情况 很 稀有 ， 但 是 有 可 能 发 生 )。 














在 上 一 个 例子 中 ， 我 们 使 用 了 许多 硬 编码 的 值 ， 其 中 包括 了 单个 订阅 的 详情 ， 以 及 简单 的 





文本 消息 。 在 现实 世界 中 ， 示 例 可 能 会 更 加 灵活 和 动态 。VAPID 和 GCM 的 细节 会 和 业务 
代码 分 离开 ， 消 息 可 以 被 发 送 到 从 数据 库 中 检索 出 的 多 个 订阅 ， 而 消息 本 身 也 可 能 包含 了 
更 多 的 细节 内 容 。 


我 们 来 看 看 这 在 哥 谭 帝国 酒店 服务 端 是 如 何 实 现 的 。 











在 subscriptions.js 中 ， 你 会 看 到 如 下 代码 : 


var db = require("./db.js"); 
var webpush = require("web-push"); 
var pushKeys = require("./push-keys.js"); 


var notify = function(pushPayload) { 
pushPayLoad = JSON.stringify(pushPayLoad ) ; 
webpush.setGCMAPIKey(pushKeys .GCMAPIKey); 
webpush.setVapidDetails( 

pushKeys .subject, 

pushKeys.publickey, 

pushKeys.privateKey 

); 


var subscriptions = db.get("subscriptions").value(); 
subscriptions.forEach(function(subscription) { 
webpush.sendNotification(subscription, pushpayload).then(function() { 
console.log("Notification sent"); 
}).catch(function() { 
console.log("Notification failed"); 
]); 
]); 
}; 
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当 预 订 被 确认 之 后 ，reservations.js 会 调用 notify() 函数 ， 用 来 发 送 消 息 : 


subscriptions.notify({ 
type: "reservation-confirmation", 
reservation: reservation 


}); 


你 会 看 到 subscriptions.js 使 用 了 本 地 数据 库 (在 /server/db.js 中 定义 ) 和 web-push 库 。 它 
还 使 用 了 一 个 称 为 push-keys.js 的 外 部 文件 ， 其 中 存储 了 发 送 推 送 消 息 所 需 的 密 钥 (10.3.1 
节 中 介绍 了 如 何 生 成 这 个 文件 )。 
你 还 会 注意 到 ， 它 使 用 了 ISON.stringify() 将 接收 到 的 消息 转换 成 字符 串 。 这 样 我 们 可 以 
确保 传递 对 象 作为 消息 是 可 行 的 ， 如 上 述 的 示例 代码 所 示 。 
最 后 ， 从 数据 库 中 获取 订阅 详情 对 象 ， 而 forEach() 循环 可 以 保证 消息 被 发 送 给 所 有 人 。 
在 你 的 应 用 中 ， 更 可 能 的 做 法 是 一 次 只 向 一 个 用 户 发 送 消息 ， 或 者 为 每 个 用 户 定 制 每 条 消 
息 的 内 容 。 为 了 保持 代码 简单 ， 我 们 的 示例 服务 器 只 知道 如 何 处 理 单个 用 户 ， 因 此 每 次 确 
认 预 订 通 知 都 会 发 送 给 所 有 订阅 者 。 
本 章 介绍 了 服务 端 代码 ， 这 是 本 书 中 的 第 一 次 。 我 一 直 保 持 这 份 代码 尽 可 能 
简单 ， 以 便 突出 核心 概念 。 我 们 的 实现 使 用 了 Node.js 和 web-push 库 来 处 理 
发 送 推送 消息 。 你 可 以 找到 其 他 编程 语言 中 许多 类 似 的 库 。 
如 果 你 正在 使 用 哥 谭 帝国 酒店 进行 编程 练习 ， 不 需要 在 服务 端 实现 任何 新 的 
内 容 。 上 述 所 有 服务 端 代 码 都 已 经 在 你 下 载 的 源 代码 中 实现 了 。 









































10.5 监听 推送 事件 并 显示 通知 


现在 ， 我 们 的 前 端 代码 知道 如 何 获取 权限 来 向 用 户 显示 通知 、 创 建 订阅 并 存储 在 服务 器 
中 ， 服 务 器 知道 如 何在 确认 预订 时 向 用 户 的 浏览 器 发 送 推送 消息 。 

接 下 来 ， 我 们 将 注意 力 转 回 浏览 器 ， 看 看 service worker 是 如 何 监听 这 些 消 息 并 进行 操作 的 。 
正如 我 们 看 到 的 那样 ，Push API 和 Notification API 要 求 的 是 同一 个 权限 。 这 意味 着 一 旦 
service worker 收 到 推送 消息 ， 我 们 就 可 以 显示 通知 了 ， 代 码 可 以 像 下 例 这 样 简单 : 


self.addEventListener("push", function() { 
self.registration.showNotification("Push message received"); 


}); 
当 推 送 消息 到 达 浏 览 器 时 ， 会 在 service worker 中 触发 push 事件 。 即 使 用 户 在 几 周 之 内 都 
没有 访问 过 我 们 的 网 站 ，service worker 依然 会 在 消息 到 达 时 立刻 开始 行动 ， 通 过 通知 ， 我 
们 的 应 用 就 有 机 会 重新 召回 用 户 〈 见 图 10-10)。 
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图 局 ， 口 Gotham ImperialHotel -Event x Push message received 和 


< CE © localhost:8443/my-account 


localhost:8443 从 














图 10-10: 响应 推送 事件 时 显示 的 通知 


在 service worker 中 显示 通知 的 代码 和 我 们 在 10.2 节 中 看 到 的 代码 相同 。 唯 一 的 区 别 是 ， 
在 service worker 中 ， 可 以 轻松 使 用 self.registration 访问 registration 对 象 。 


在 push 事件 监听 器 中 ， 你 可 以 通过 PushEvent 对 象 的 data 属性 (传递 给 事件 监听 器 的 第 
一 个 参数 )， 访 问 推送 消息 的 内 容 : 
self.addEventListener("push", function(event) { 
var message = event.data.text(); 
self.registration.showNotification("Push message received", { 
body: message 


}); 
}); 


如 图 10-11 所 示 ，PushEvent 对 象 属性 中 包含 了 text() 方法 ， 以 简单 的 字符 串 形 式 返 回 消 
息 内 容 。 此 外 它 还 有 json() 方法 ， 可 以 将 消息 内 容 解 析 为 JSON， 并 以 对 象形 式 返 回 ( 见 
图 10-12)。 
































@ /ND GothamImperialHotel - Event x Ca push message received x | 


> 区 {"type":"reservation- 
所 C © localhost:8443/my-account | confirmation","reservation": 


{"id":"79206484","arrivalDate":"Novembe 
r 5th 
2022""nights":"3""guests":"2","status":... 


localhost:8443 














图 10-11: 在 push 事件 发 生 时 ， 通 过 event.data.text() 显示 通知 


self.addEventListener("push", function(event) { 
var message = event.data.json(); 
self.registration.showNotification("Push message received", { 
body: "Reservation for "+message.reservation.arrivalDate+" has been confirmed." 
}); 
]); 














图 轧 ， 口 Gotham Imperial Hotel - Event x BD Push message received 六 | 


Reservation for November 5th 2022 has | 


:二 GC © localhost:8443/my-account ec 


localhost:8443 














10-12: 在 push 事件 发 生 时 ， 通 过 event.data.json() 显示 通知 


让 我 们 结合 目前 为 止 所 学 的 内 容 ， 在 用 户 预 约 被 确认 时 ， 为 哥 谭 帝国 酒店 的 用 户 显 示 一 条 
很 炫 的 通知 。 
在 serviceworkerjs 中 ， 在 文件 的 末尾 添加 下 列 代码 : 


self.addEventListener("push", function(event) { 
var data = event.data.json(); 
if (data.type === "reservation-confirmation") { 
var reservation = data.reservation; 
event .waitUntil( 
updateInObjectStore( 
"reservations", 
reservation.id, 
reservation) 
.then(function() { 
return self.registration.showNotification("Reservation Confirmed", { 
body: 
"Reservation for "+reservation.arrivalDate+" has been confirmed.", 
icon: "/img/reservation-gih.jpg", 
badge: "/img/icon-hotel.png", 
tag: "reservation-confirmation-"+reservation.id, 
actions: [ 
{ 
action: "details", 
title: "Show reservations", 
icon: "/img/icon-cal.png" 








}, { 
action: "confirm", 
title: "OK", 
icon: "/img/icon-confirm.png" 
J 
] ， 
vibrate: 
[500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500] 
]); 
}) 
3 
} 
]); 





我 们 的 新 事件 监听 器 会 耐心 等 待 推送 事件 ， 当 这 样 的 推送 消息 到 达 service worker 后 ， 
事件 监听 器 会 检索 PushEvent 中 包含 的 数据 ， 并 根据 其 包含 的 type 属性 决定 如 何 进 
行 操作 。 如 果 type 的 值 等 于 reservation-confirmation， 代 码 就 会 知道 ， 它 需要 使 
用 updateInObjectStore() 更 新 IndexedDB 中 的 预订 数据 ， 并 使 用 self.registration. 


showNotification() 显示 通知 ( 见 图 10-13)。 
















































® @ DD Gotham Imperial Hotel - Event x Reservation Confirmed 


Your reservation for November 5th 2022 
has been confirmed. 


localhost:8443 


< CGC |© localhost:8443/my-account 

















四 Show reservations 












店 OK 











图 10-13: 预订 确认 通知 的 最 终 效 果 





T 谭 帝国 酒店 服务 器 发 送 的 消息 的 结构 如 下 : 


蝇 
zol 





"type": "reservation-confirmation", 
"reservation": { 

"id": "79212418" ， 

"arrivaLDate" : "November 5th 2022", 





"nights": "3", 
"guests": "2", 
"status": "Confirmed", 
"bookedOn": "2016-10-31T15:40:41+02:00" ， 
"price": 636 
} 
} 


将 推送 消息 的 数据 构建 为 包含 type 和 预订 详情 的 对 象 ， 完 全 是 主观 的 选择 。 
我 们 也 可 以 将 其 构造 成 不 包含 type 的 对 象 。 其 至 可 以 将 整 条 消息 生成 一 个 包 
含 最 终 通知 文本 的 字符 串 ， 或 者 是 诸如 reservation-confirmation,79212418 
这 样 的 字符 串 ， 随 后 在 service worker 中 进行 解析 ， 并 根据 ID 从 IndexedDB 
中 获取 预订 详情 。 

















让 我 们 更 加 仔细 地 查看 新 事件 监听 器 的 代码 。 

首先 ， 你 可 能 会 注意 到 ，push 事件 监听 器 代码 使 用 了 event.waituntil()， 以 确保 在 原始 
push 事件 完成 之 前 ， 先 要 等 待 更 新 IndexedDB 和 通知 的 代码 一 起 完成 。 正 如 我 们 在 第 3 章 
看 到 的 那样 ，watituntitL() 会 延长 事件 的 生命 周期 ， 直 到 传递 进去 的 promise 完成 为 止 。 在 
这 个 例子 里 ， 我 们 传 入 的 是 updateIn0bjectstore()， 它 会 返回 一 个 promise， 随 后 将 这 个 
promise 传递 给 showNotification()， 后 者 也 会 返回 一 个 promise。 


如 果 我 们 没有 告诉 PushEvent 等 待 其 中 的 代码 执行 完成 ， 可 能 会 发 现 启动 了 需要 花费 

















更 长 时 间 才 能 完成 的 操作 (例如 发 起 网 络 请 求 )， 但 是 由 于 浏览 器 可 能 认为 操作 完成 时 
PushEvent 已 经 结束 ， 所 以 service worker 可 能 就 不 能 对 结果 进行 操作 了 。 


在 开始 显示 通知 的 逻辑 之 前 ， 代 码 首 先 调用 了 updateIn0bjectSstore()， 并 更 新 了 
IndexedDB 中 的 预订 详情 。 通 过 在 push 事件 中 进行 这 一 操作 ， 我 们 就 可 以 确保 本 地 的 预订 
数据 可 以 一 直 保持 最 新 。 如 果 用 户 接收 到 推送 通知 ， 告 知 他 其 中 一 个 预订 已 经 确认 ， 那 么 
他 在 离线 访问 应 用 时 ， 最 新 的 预订 数据 (包括 已 确认 的 预订 ) 就 可 以 展示 出 来 。 


接 下 来 代码 调用 了 showNotification()。 这 里 使 用 的 语法 我 们 应 该 很 熟悉 了 ， 但 你 可 能 还 
会 注意 到 ， 除 了 自 定 义 消 息 、 花 哨 的 徽章 标记 和 图 标 、vibrate 选项 播放 的 主题 曲 之 外 ， 
通知 还 包含 了 两 个 按钮 。 它 们 是 使 用 通知 选项 对 象 的 actions 属性 来 创建 的 。 


每 个 通知 操作 都 是 由 title (按钮 文本 )、icon (在 文本 旁边 显示 的 图 标 ) 以 及 action (用 
于 表示 该 操作 的 名 称 ) 组 成 的 。 显 然 ， 它 还 遗漏 了 一 些 东西 :实际 进行 茶 项 操作 的 方式 。 


由 于 通知 是 在 浏览 器 之 外 (操作 系统 层面 ) 泻 染 的 UI 元素 ， 用 户 可 能 会 在 通知 创建 几 个 
小 时 之 后 才 进 行 操作 (例如 ， 在 午夜 弹出 的 通知 )， 因 此 设置 回调 或 者 promise 来 等 待 操作 
是 没有 意义 的 。 相 反 ， 可 以 将 通知 上 进行 的 操作 作为 独立 的 事件 发 送 到 service worker。 通 
过 监听 这 些 事件 ， 我 们 就 可 以 基于 用 户 交 互 (忽略 通知 ， 或 者 是 点 击 两 个 按钮 之 一 ) 进行 
对 应 的 操作 。 


编辑 serviceworker.js， 将 下 列 代码 添加 到 文件 结尾 : 


self.addEventListener("notificationclick", function(event) { 
event.notification.close(); 
if (event.action === "details") { 
event .waitUntil( 
self.clients.matchAll().then(function(activeClients) { 
if (activeClients.length> 0) { 
activeClients[0] .navigate("http://Llocalhost:8443/my-account"); 
} else { 
self.clients.openWindow("http://Llocalhost:8443/my-account"); 






















































































这 段 代码 会 监听 notificationclick 事件 。 每 当 应 用 创建 的 任何 通知 被 用 户 点 击 时 ， 就 会 
发 送 这 些 事 件 。 

我 们 的 事件 监听 器 在 一 开始 会 调用 event.notification.close() 来 关闭 通知 。 一 旦 用 户 和 
通知 进行 了 交互 ， 我 们 就 不 需要 再 保留 通知 了 。 这 也 确保 了 不 同 设备 、 操 作 系统 和 浏览 器 
上 的 体验 都 一 致 其 中 一 部 分 会 在 用 户 点 击 时 自动 关闭 通知 ， 另 一 部 分 则 只 会 在 你 发 出 
指令 后 才 会 关闭 。 

接 下 来 ， 我 们 需要 了 解 用 户 如 何 与 通知 进行 交互 。 由 于 我 们 的 网 站 目前 只 有 一 个 通知 ， 并 
且 我 们 只 关心 当 “Show reservations” 按 钮 被 点 击 时 会 发 生 什 么 ， 所 以 我 们 检查 了 事件 的 
actions 属性 。action 属性 会 包含 被 点 击 的 操作 名 称 (如 果 没 有 点 击 任何 一 个 操作 ， 值 就 
是 空 字 符 串 )。 属 性 值 等 于 我 们 指定 的 action 属性 (我们 命名 为 details 和 confirm)。 如 
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果 用 户 点 击 的 操作 是 details， 我 们 就 要 跳 转 到 应 用 的 My Account 页 面 。 此 时 ， 我 们 可 以 
简单 地 调用 self.clients.openWindow(url) 来 打开 一 个 新 窗口 。 但 是 为 了 提供 更 优 的 用 户 
体验 ， 我 们 可 以 首先 检查 应 用 中 是 否 有 激活 的 窗口 ， 如 果 有 ， 则 在 那个 窗口 上 跳 转 到 My 
Account 页 面 。 


如 果 你 对 于 检查 打开 窗口 (self.clients.matchAll) 的 代码 感到 陌生 ， 请 参考 第 8 章 。 


询问 通知 

上 述 的 用 例 非 常 简单 。 我 们 的 网 站 里 只 有 一 种 通知 类 型 (确认 预订 )， 因 此 我 们 并 不 在 平 
用 户 点 击 了 哪 种 类 型 的 通知 。 在 更 加 复杂 的 例子 中 ， 我 们 可 能 会 同时 打开 多 个 通知 来 通知 
新 事件 ， 以 及 同时 显示 多 个 确认 预订 的 通知 。 


如 果 我 们 想 要 知道 哪 种 类 型 的 通知 触发 了 notificationclick 事件 (例如: 是 新 事件 还 是 
确认 预订 ) ， 用 户 点 击 的 是 哪个 特定 的 通知 〈 例 如 : 用 户 点 击 的 是 万 圣 节 派对 通知 的 回复 
按钮 ， 还 是 新 年 舞会 的 通知 ) ， 该 怎么 办 ? 


有 几 种 方法 可 以 确定 用 户 与 之 交互 的 是 哪 一 个 通知 。 


最 简单 的 方法 就 是 我 们 刚才 所 看 到 的 那样 。 只 需要 检查 用 户 点 击 的 操作 名 称 即 可 。 在 我 们 
的 场景 下 这 样 足够 了 ， 因 为 我 们 不 关心 通知 的 类 型 我 们 只 有 一 种 类 型 ) 以 及 通知 所 提 及 
的 是 哪 一 个 预订 。 


另 一 种 方法 是 ， 读 取 通 知 窗口 的 名 称 。 这 个 名 称 就 是 我 们 之 前 创建 通知 的 时 候 分 配 的 tag 
标签 。 以 下 就 是 这 种 方法 ， 可 以 根据 通知 的 tag 决定 如 何 处 理 : 


self.addEventListener("notificationclick", function(event) { 
if (event.notification.tag === "event-announcement") { 
self.clients.openWindow("http://Llocalhost:8443/events"); 
} else if (event.notification.tag === "confirmation") { 
self.clients.openWindow("http://Llocalhost:8443/my-account"); 
} 
]); 


当 用 户 点 击 的 通知 标签 是 event-announcement 时 ， 我 们 采取 第 一 种 操作 ， 如 果 通知 标签 是 
confirnation， 则 代码 采取 另 一 种 操作 。 


第 三 种 方法 是 给 每 一 条 通知 传递 数据 : 
self.addEventListener("push", function(event) { 
var data = event.data.json(); 
var reservation = data.reservation; 
self.registration.showNotification("Reservation Confirmed", { 
tag: "reservation-confirmation", 
data: reservation 
}); 
]); 



















































































self.addEventListener("notificationclick", function(event) { 
event.notification.close(); 
if (event.notification.tag === "reservation-confirmation") { 





var reservation = event.notification.data; 
self.registration.showNotification("Notification clicked", { 
body: 
"Notification tag: "+event.notification.tag+"\n"+ 
"Notification reservation date: "+reservation.arrivalDate 


}); 


这 个 代码 示例 演示 了 当 我 们 在 推送 事件 中 创建 通知 时 ， 可 以 将 data 属性 设置 为 包含 预订 的 
详情 。 随 后 当 通知 被 点 击 时 ， 我 们 可 以 通过 event.notification.data 访问 数据 ， 并 使 用 它 
来 展示 第 二 条 通知 〈 或 者 在 网 站 中 打开 特定 的 页 面 ， 指 向 特定 的 预订 ) ( 见 图 10-14) 。 


























® 国 口 Gotham Imperial Hotel - Ever Xx 人 Notification clicked * 


Notification tag: reservation-confirmation 
Notification reservation date: November 
5th 2022 


< CGC |© localhost:8443/my-account 


localhost:8443 














10-14: 响应 notificationclick 事件 时 显示 的 通知 


10.6 小结 
本 章 中 对 哥 谭 帝国 酒店 Web 应 用 做 的 改进 ， 真 正 将 渐进 式 Web 应 用 结合 到 了 一 起 。 


我 们 不 仅 可 以 在 任何 连接 状态 下 给 予 用 户 最 佳 的 体验 ， 还 可 以 让 用 户 在 离开 应 用 后 保持 状 
态 更 新 。 


让 用 户 知 悉 项 订 的 更 新 、 在 用 户 到 达 之 前 发 出 提醒 ， 甚 至 在 用 户 在 哥 谭 喜 留 期 间 提供 建 
议 ， 这 些 能 力 使 得 我 们 可 以 显著 地 提升 用 户 的 体验 。 
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第 11 章 


渐进 式 Web 应 用 的 用 尸体 验 





11.1 优雅 与 信任 


渐进 式 Web 应 用 呈现 了 Web 工作 方式 的 一 种 真正 的 范式 转换 。 它 们 提供 了 超出 用 户 期 户 
的 Web 体验 。 


用 户 并 不 期 待 Web 应 用 离线 的 时 候 能 够 继续 工作 。 然 而 ， 渐 进 式 Web 应 用 超出 了 用 户 的 
期 望 。 


用 户 并 不 期 待 在 与 用 户 相关 的 新 信息 出 现时 ，Web 应 用 会 向 他 们 发 送 更 新 。 然 而 ， 渐 进 式 
Web 应 用 再 次 超出 了 用 户 的 期 望 。 

用 户 并 不 期 待 全 屏幕 的 体验 、 从 主屏 幕 局 动 、 外 观 和 行为 宛如 原生 应 用 。 然 而 ， 渐 进 式 
Web 应 用 又 超出 了 用 户 的 期 望 。 

另 一 方面 ， 当 用 户 访问 Web 应 用 时 ， 会 期 待 加 载 的 内 容 是 最 新 的 。 但 是 ， 如 果 用 户 设 有 意 
识 到 自己 处 于 离线 状态 ， 他 可 能 同样 没有 意识 到 ， 屏 幕 上 显示 的 内 容 可 能 是 几 小 时 前 ， 其 
至 是 几 天 前 的 。 对 用 户 来 说 ， 渐 进 式 Web 应 用 似乎 没有 交付 用 户 所 期 望 的 体验 。 

虽然 Web 和 原生 应 用 之 间 的 能 力 差 距 正 在 迅速 缩小 ， 但 是 渐进 式 Web 应 用 的 能 力 与 用 户 
的 期 望 与 感知 之 间 ， 仍 然 存 在 着 很 大 的 差距 。 

从 长 远 来 看 ， 随 着 越 来 越 多 用 户 使 用 渐进 式 Web 应 用 ， 期 望 与 现实 之 间 的 差距 将 会 缩小 和 
消失 。 但 是 在 这 发 生 之 前 ， 用 户 期 望 和 渐进 式 Web 应 用 之 间 的 这 种 不 协调 ， 给 我 们 带 来 了 
新 的 挑战 。 我 们 可 以 通过 与 用 户 进行 适当 的 交流 ， 来 解决 这 个 问题 。 
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作为 开发 人 员 ， 我 们 的 角色 不 是 教育 用 户 有 关 Web 的 知识 ， 而 是 要 引导 并 帮 
助 用 户 在 应 用 中 实现 他 们 的 目标 。 我 们 可 以 通过 清晰 的 沟通 〈 包 括 口 头 上 和 
视觉 上 ) 来 帮助 用 户 理解 我 们 的 应 用 ， 以 此 来 实现 这 一 点 。 随 着 时 间 推 移 ， 
当 用 户 和 开发 者 在 渐进 式 Web 应 用 上 花费 越 来 越 多 的 时 间 ， 就 会 出 现 通用 
的 模式 。 

想 想 看 ， 在 短 短 几 年 内 ,汉堡包 图 标 三 几乎 成 了 移动 端 导 航 菜 单 的 代名词 。 
在 不 远 的 将 来 ， 离 线 也 会 有 属于 自己 的 汉堡 包 时 刻 。 















































在 许多 方面 ， 随 着 渐进 式 Web 应 用 在 能 力 上 赶 超 了 原生 应 用 ， 原 生 应 用 相 比 Web 的 优势 
归结 为 了 信任 问题 。 用 户 无 论 在 哪里 都 会 信任 他 们 的 原生 应 用 ， 即 使 在 飞机 上 运行 消息 应 
用 之 前 ， 也 不 需要 三 思 而 后 行 。 然 而 ， 用 户 却 不 会 在 起 飞 后 打开 浏览 器 。 用 户 信 任 原生 应 
用 会 使 用 通知 来 保持 状态 更 新 ， 但 是 在 访问 网 站 时 ， 却 要 通过 一 遍 又 一 遍地 刷新 网 站 来 检 
查 更 新 。 

随 着 Web 和 原生 应 用 之 间 的 差异 变 得 主要 是 信任 问题 ， 在 Web 应 用 中 传达 一 种 信任 感 就 
变 得 越发 重要 。 当 用 户 在 使 用 应 用 时 丢失 了 连接 ， 可 以 通过 与 用 户 沟 通 来 增强 用 户 的 信 
任 ， 让 他 相信 其 工作 不 会 丢失 。 当 应 用 被 完全 缓存 时 ， 不 妨 让 用 户 知道 ， 在 离线 时 可 以 使 
用 你 的 应 用 。 在 请 求 权 限 以 发 送 推送 消息 之 前 ， 让 用 户 确切 地 知道 他 可 以 从 通知 中 获 益 ， 
以 及 通知 可 能 包括 哪些 内 容 。 要 记 住 ， 信 任 不 仅仅 是 关于 你 的 渐进 式 Web 应 用 的 能 力 ， 还 
包括 让 用 户 知道 你 不 会 滥用 这 些 能 力 。 

本 章 会 探讨 与 用 户 沟通 、 将 信息 传达 给 用 户 的 不 同 沟通 模式 。 我 们 还 会 看 到 一 些 增强 渐进 
式 Web 应 用 界面 ， 从 而 改善 用 户 体验 并 提高 网 站 成 功 概率 的 大 好 机 会 。 我 们 在 第 5 章 中 探 
索 了 构建 离线 优先 应 用 的 方式 ， 并 优雅 地 处 理 了 连接 的 变化 ， 上 述 这 些 概念 将 与 第 5 章 的 
内 容 紧 密 联系 在 一 起 。 一 旦 应 用 优雅 且 成 功 地 处 理 了 连接 的 变化 ， 并 与 用 户 清晰 地 进行 交 
流 ， 灌 输 信任 感 ， 那 么 应 用 的 体验 就 可 以 真正 与 任何 原生 应 用 相 娘 美 了 。 


11.2 ”从 service worker 传 递 状态 

让 我 们 从 可 能 希望 与 用 户 沟通 的 一 种 信息 开始 ， 看 看 如 何在 应 用 中 实现 它 。 

我 们 添加 到 哥 谭 帝国 酒店 应 用 的 第 一 个 增强 是 让 它 可 在 用 户 离线 的 情况 下 也 能 正常 工作 。 
通过 让 应 用 在 任何 连接 下 无 颖 地 工作 ， 我 们 的 确 改善 了 用 户 的 体验 。 但 是 ， 如 果 用 户 不 知 
道 自己 离线 ， 并 且 没 有 意识 到 自己 查看 的 内 容 可 能 是 过 时 的 呢 ?” 我 们 可 以 通过 检测 用 户 离 
线 并 正在 查看 缓存 内 容 ， 向 用 户 展示 消息 ， 让 他 知道 自己 查看 的 内 容 可 能 过 时 了 。 
我 们 可 以 通过 两 步 来 完成 : 
(1) 在 service worker 中 ， 检 测 用 户 离线 并 在 查看 缓存 内 容 ， 并 将 此 传达 给 页 面 ; 
(2) 在 页 面 中 监听 消息 的 传达 ， 并 通知 用 户 。 
在 我 们 的 应 用 中 ， 大 多 数 动态 内 容 要 么 从 IndexedDB 返回 ， 要 么 从 缓存 回 退 到 网 络 请 求 。 
每 次 真正 从 网 络 请 求 的 唯一 内 容 ( 仅 在 用 户 离线 时 ， 回 退 到 缓存 响应 ) 只 有 事件 数据 。 因 
此 这 个 请 求 就 是 检测 用 户 离线 并 与 页 面 通信 的 好 机 会 。 
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个 请 求 还 适合 用 来 检测 何 时 将 信息 传达 给 用 户 ， 因 为 事件 数据 只 有 在 页 
Te es rel es ep 
(HTML) 的 请 求 上 进行 通信 ， 页 面 可 能 没有 准备 好 接收 我 们 的 消息 并 显示 通 
知 。 在 这 种 情况 下 ， 我 们 就 必须 要 修改 service worker 的 代码 ， 在 发 送 消息 
之 前 等 待 页 面 加 载 完 成 。 









































通过 在 命令 行 运 行 下 列 命令 ， 确 保 代 码 处 于 上 一 章 结束 时 的 状态 : 


git reset --hard 
git checkout ch11-start 








我 们 首先 修改 serviceworker.js， 修 改 fetch 事件 监听 器 中 处 理 /events.json 的 部 分 : 


} else if (requestURL.pathname === "/events.json") { 
event.respondwith( 
caches.open(CACHE_NAME).then(function(cache) { 
return fetch(event.request).then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 
}).catch(function() { 
self.clients.get(event.clientId).then(function(client) { 
client.postMessage("events-returned-from-cache"); 
]); 
return caches.match(event.request); 
]); 
}) 
); 
} 


这 段 代码 中 的 大 部 分 已 经 在 5.5 市 中 做 出 了 解释 。 唯 一 的 补充 是 catch 语句 块 中 的 前 三 
行 。 当 events.json 网 络 请 求 失败 时 ，catch 语句 块 就 会 执行 ， 代 码 会 发 送 一 条 消息 到 客户 
端 ， 告 知 请 求 了 事件 文件 。 消 息 的 内 容 (数据 ) 是 我 为 这 种 事件 类 型 选择 的 一 个 简单 字符 


串 events-returned-from-cache。 


接 下 来 ， 我 们 需要 确保 页 面 监听 了 message 事件 ， 并 显示 通知 。 我 们 在 app.js 中 添加 下 列 
事件 监听 器 


if ("serviceWorker" in navigator) { 
navigator .serviceWorker .addEventListener("message", function (event) { 























if (event.data === "events-returned-from-cache") { 
alert( 
"You are currently offline. The content of this page may be out of date" 
); 
} 
]); 


} 


这 段 代码 首 先 确保 了 用 户 浏览 器 支持 service worker。 接 下 来 ， 它 将 添加 一 个 新 的 事件 监 
听 器 ， 监 听 message 事件 。 当 检测 到 这 个 事件 时 ， 检 查 该 消息 的 内 容 (在 event.data 中 可 
以 获取 )， 如 果 能 与 我 们 选择 的 事件 名 称 相 匹配 ， 则 向 用 户 显 示警 报 。 有 关 如 何在 service 
worker 和 页 面 之 间 发 送 消息 的 内 容 请 参见 第 8 章 。 


显示 alert 给 用 户 ， 显 然 不 是 我 们 想 要 的 流畅 用 户 体验 。 让 我 们 来 改进 一 下 
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11.3 使 用 Progressive UI KITT 通信 
在 实现 剩余 的 消息 之 前 ， 让 我 们 来 看 一 个 简便 的 库 ， 它 可 以 使 我 们 和 用 户 的 交流 更 加 容易 。 


Progressive UI KITT 是 一 个 小 型 库 ， 可 以 处 理 service worker 和 页 面 之 间 的 通信 ， 并 且 可 以 
向 用 户 浑 染 通知 。 它 可 以 处 理发 送 通知 给 一 个 或 者 多 个 窗口 的 情况 ， 可 以 在 通知 中 引入 按 
钮 ， 并 且 可 以 轻松 定制 任何 视觉 样式 与 视觉 主题 。 


让 我 们 来 看 看 如 何 使 用 Progressive UI KITT 添加 与 上 一 节 中 相同 的 离线 消息 ( 见 图 11-1)。 
































BY htips/www.gothamimperial.com 


Gotham Imperial Hotel | 
1 Imperial Plaza, Gotham. Total price 


Check-in: November Sth 2022, §675.99 


3nights. 2 guests. 


Modify booking details Confirmed 
Order number: 56020669 eC Booked on: January 28th 2017 


Gotham Imperial Hotel 


1 Imperial Plaza, Gotham. Total price 


Check-in: March 7th 2017. §450.99 


2 nights. 2 guests， 


>urrently offline. The content of this page may be out of date OK Confirmed 














11-1: Progressive UI KITT 的 离线 消息 


如 果 你 已 经 在 代码 中 实现 了 上 一 节 中 的 两 处 修改 ， 现 在 可 以 回 滚 那些 修改 。 
我 们 的 新 代码 会 替换 那些 代码 。 





Progressive UI KITT 可 以 在 项 目的 public/js/vendor/progressive-ui-kitt 目录 中 获取 。 要 使 用 
它 ， 我 们 需要 三 个 文件 。 


。 progressive-ui-kitt.js 





主要 的 库 文件 。 在 任何 需要 显示 通知 的 页 面 中 都 要 引入 。 

。 themes/flat.css 一 一 用 来 调整 通知 样式 的 主题 文件 。 可 以 自由 地 替换 成 themes 目录 中 的 
任何 其 他 文件 ， 或 者 创建 你 自己 的 主题 文件 。 

。 progressive-ui-kitt-sw-helper.js 包含 了 要 引入 到 service worker 中 的 辅助 函数 ， 可 以 在 
service worker 中 用 来 触发 任何 页 面 的 通知 。 


在 开始 前 ， 我 们 要 确保 Progressive UI KITT 及 其 样式 表 都 能 够 缓存 在 service worker 中 ， 以 
便 我 们 可 以 在 用 户 离线 时 使 用 它们 。 
在 serviceworker.js 文件 中 ， 添 加 下 列 文件 到 CACHED_URLS 数组 中 : 


"/js/vendor/progressive-ui-kitt/themes/flat.css", 
"/js/vendor/progressive-ui-kitt/progressive-ui-kitt.js" 
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接 下 来 在 serviceworker.js 的 顶部 ， 添 加 下 面 这 行 代 码 ， 引 入 Progressive UI KITT 的 service 
worker 辅助 方法 : 


importScripts("/js/vendor/progressive-ui-kitt/progressive-ui-kitt-sw-helper.js"); 
最 后 需要 在 任何 显示 通知 的 页 面 中 引入 和 初始 化 Progressive UI KITT。 
在 index.html 和 my-accounthtml 的 代码 底部 ， 添 加 下 列 代码 ， 放 在 闭合 标签 </body> 之 前 : 


<script src="/js/vendor/progressive-ui-kitt/progressive-ui-kitt.js"></script> 
<script> 
ProgressiveKITT.setStylesheet("/js/vendor/progressive-ui-kitt/themes/flat.css"); 
ProgressiveKITT.render(); 

</script> 


这 段 代码 包含 了 Progressive UI KITT 的 主 文件 。 选 择 了 通知 的 样式 (这 里 使 用 的 是 扁平 化 
主题 )， 并 通过 调用 render() 初始 化 KITT。 


现在 KITT 已 经 在 页 面 和 service worker 中 准备 就 绕 了 人， 我 们 可 以 创建 第 一 条 消息 。 
在 serviceworker.js 中 ， 修 改 fetch 事件 监听 器 中 处 理 /events.json 的 部 分 : 


} else if (requestURL.pathname === "/events.json") { 
event.respondwith( 
caches.open(CACHE_NAME).then(function(cache) { 
return fetch(event.request).then(function(networkResponse) { 
cache.put(event.request, networkResponse.clone()); 
return networkResponse; 
}).catch(function() { 
ProgressiveKITT.addAlert( 
"You are currently offline."+ 
"The content of this page may be out of date." 
); 
return caches.match(event.request); 
]); 
}) 























3 
} 


我 们 唯一 添加 的 代码 ， 是 修改 了 catch 代码 块 ， 调 用 了 ProgressiveKITT.addAlert， 并 传 
入 我 们 的 消息 内 容 。 

就 这 么 简单 。 只 需要 一 条 简单 的 命令 ，KITT 就 会 完成 剩 下 的 工作 。 下 次 用 户 在 离线 访问 
我 们 的 应 用 时 ， 就 能 看 到 一 条 通知 ， 如 图 11-1 所 示 。 











你 可 以 使 用 KITT 创建 普通 消息 、 弹 窗 和 确认 消息 ， 分 别 对 应 的 调用 
是 ProgressiveKITT.addMessage()、ProgressiveKITT.addAlert() 和 














ProgressiveKITT.addConfirm( ) 。 
弹 窗 中 包含 文本 和 单个 按钮 的 写法 (默认 按钮 标签 是 OK) : 


ProgressiveKITT.addAlert("Caching complete!"); 
ProgressiveKITT.addAlert("Caching complete!", "Great"); 
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确认 消息 包含 文本 和 两 个 按钮 (默认 标签 是 OK 和 Cancel) : 
ProgressiveKITT.addConfirm("Caching complete!"); 
ProgressiveKITT.addConfirm("Caching complete!", "Great", 


普通 消息 只 包含 文本 ,没有 包含 其 他 内 容 : 
ProgressiveKITT.addMessage("Caching complete!"); 








'OK"); 


由 于 普通 消息 中 没有 包含 任何 按钮 ， 你 可 能 要 连同 hideAfter 选项 一 起 使 用 ， 








以 在 一 段 时 间 之 后 自动 隐藏 消息 : 
ProgressiveKITT.addMessage("Expiring message", {hideAfter 

所 有 这 些 命令 都 可 以 在 service worker 和 页 面 中 正常 运行 。 

要 了 解 KITT 接受 的 完整 参数 列表 、 如 何 将 回调 函数 添加 到 按钮 ， 

的 文档 ， 请 参阅 https://pwabook.com/kitt。 

















11.4 渐进 式 Web 应 用 中 的 常见 消息 





除了 上 一 节 中 显示 的 离线 消息 之 外 ， 还 有 哪些 其 他 信息 需要 传达 给 用 户 呢 ? 这 











案 取决 于 你 的 应 用 ， 但 是 这 里 可 以 提供 一 些 思 路 。 


11.4.1 缓存 完成 





:2000}); 


以 及 完整 


咏 


文 个 问题 的 


一 且 service worker 完成 安装 ， 并 缓存 了 显示 应 用 所 需 的 所 有 静态 资源 ， 你 可 能 想 要 给 用 





户 显示 一 个 消息 ， 让 他 知道 网 站 现在 可 以 离线 工作 了 : 


self.addEventListener("install", function(event) { 
event .waitUntil( 
caches .open(CACHE_NAME).then(function(cache) { 
return cache.addAlL(CACHED_URLS).then(function() { 
ProgressiveKITT.addMessage( 
"Caching complete! Future visits will work offline.", 
{hideAfter: 2000} 


); 
return Promise.resolve(); 
}); 
}) 
)3 
]); 


11.4.2 ”页 面 已 缓存 
在 8.1 节 中 ， 我 们 看 到 一 个 提供 旅游 指南 的 网 站 ， 其 中 列 出 了 哥 谭 市 的 每 一 
哥 永 有 数 以 千 计 的 餐馆 ， 我 们 认为 将 所 有 餐馆 的 详情 都 缓存 起 来 是 不 合理 的 











家 餐馆 。 由 于 
。 取 而 代 之 的 
传达 给 用 户 ， 








是 ， 我 们 选择 只 缓存 用 户 感 兴趣 的 餐馆 (用 户 访问 过 的 页 面 )。 如 何 将 这 件 导 
让 用 户 知道 ， 即 使 在 离线 情况 下 也 能 打开 这 个 新 餐馆 的 页 面 呢 ? 
self.addEventListener("message", function(event) { 


if (event.data === "cache-current-page") { 
var sourceUrl = event.source.url; 





























caches.open("my-cache" ) .then(function(cache) { 
return cache.addAll([sourceUrl]).then(function() { 
ProgressiveKITT.addMessagel( 
"This restaurant's details can now be accessed offline.", 
{ hideAfter: 2000 } 
党 
return Promise.resoLve(); 
]); 
]); 


} 
的 
在 11.7 节 中 ， 我 们 还 将 看 到 传达 这 种 信息 的 一 种 视觉 方式 。 


11.4.3 ”操作 失败 ， 但 会 在 用 户 恢复 连接 时 完成 


在 第 7 章 中 ， 我 们 学 习 了 如 何 使 用 后 台 同 步 ， 确 保 用 户 所 采取 的 任何 操作 都 能 可 靠 地 完 
成 ， 即 使 是 在 连接 失败 的 情况 下 。 但 是 ， 当 用 户 在 移动 设备 上 采取 重要 操作 或 者 填写 表 生 
时 ， 如 果 连 接 失 败 ， 用 户 可 能 会 很 激动 。 在 这 种 情况 下 ， 我 们 可 以 向 用 户 保证 ， 操 作 将 会 
在 恢复 连接 之 后 立即 进行 : 


self.addEventListener("sync", function(event) { 
event .waitUntil( 
saveChanges().catch(function() { 
ProgressiveKITT.addAlert( 
"You are currently offline, but your reservation has been saved." 
); 
}) 
); 
]); 


11.4.4 
一 且 用 户 订 阅 了 推送 通知 ， 你 就 可 以 告知 用 户 ， 在 更 新 可 用 时 他 会 收 到 通知 : 


navigator .serviceWorker .ready.then(function(registration) { 
return registration.pushManager .subscribe(subscribeOptions); 
}).then(function() { 
ProgressiveKITT.addMessagel( 
"Thank you. You will be notified of any changes to your reservation.", 
{hideAfter: 3000} 
); 
]); 


比 起 立即 滥用 通知 权限 (发 送 一 条 关于 通知 的 通知 ) 来 告知 用 户 他 会 收 到 通知 ， 这 种 显示 
消息 的 方式 更 加 巧妙 。 


11.5 选择 正确 的 用 词 


和 用 户 沟通 并 增强 用 户 对 应 用 的 信任 感 ， 选 择 正 确 的 用 词 是 其 中 一 个 重要 的 部 分 。 

















由 
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如 果 用 户 花 了 几 分 钟 时 间 认真 地 编辑 图 片 、 添 加 了 艺术 滤 镜 和 和 井 号 话题 描述 ， 只 是 在 点 击 
提交 按钮 前 的 一 秒 丢 失 了 连接 ， 请 不 要 使 用 不 详 的 “网 络 错误 ”信息 进行 响应 。 相 反 ， 要 
让 用 户 放 心 ， 他 的 图 片 、 消 息 和 辛苦 工作 不 会 丢失 ， 并 且 可 以 在 随后 的 时 间 再 次 发 送 。 

你 项 至 可 以 根据 连接 状态 的 变化 ， 修 改 应 用 界面 的 措辞 。 如 有 果 你 将 保存 按钮 的 文字 改 成 “ 保 
存 到 本 地 ”， 或 者 是 将 发 送 按钮 改 成 “ 当 在 线 时 发 送 ”， 就 可 以 提升 用 户 对 应 用 的 信心 一 一 相 
信 他 们 的 工作 不 会 丢失 。 否 则 ， 他 们 就 会 盯 着 按钮 ， 述 疑 如 果 点 击 之 后 会 发 生 什么 。 


11.6 不 要 直 奔 主题 

消息 和 信任 至 关 重 要 的 另 一 个 场景 ， 是 当 请 求 用 户 准 许 我 们 做 某 事 情 时 。 

在 第 10 章 中 ， 我 们 向 用 户 请 求 了 推送 通知 的 权限 ， 以 此 作为 通知 和 重新 召回 用 户 的 一 种 
方式 。 但 是 请 求 用 户 授权 时 的 用 户 体验 是 缺失 的 。 我 们 只 是 简单 地 打开 了 授权 对 话 框 ， 但 
是 没有 为 用 户 提 供 任何 上 下 文 ， 也 没有 解释 通知 的 使 用 方式 。 

不 幸 的 是 ， 我 们 经 常 看 到 这 种 用 户 体验 做 得 很 差 ， 并 且 会 导致 自 毁 的 结果 ， 值 得 我 们 花 时 
间 思 考 一 种 更 好 的 选择 。 


在 考虑 请 求 发 送 推送 通知 的 权限 之 前 ， 先 要 考虑 两 件 事情 : 时 机 和 消息 。 


记 住 , 一 旦 用 户 拒绝 了 权限 请 求 ， 你 就 不 能 再 请 求 了 。 出 于 这 个 原因 ， 考 虑 请 求 的 时 机 是 
至 关 重 要 的 。 如 果 用 户 刚 到 达 你 的 网 站 ， 你 就 打开 授权 对 话 框 ， 那 么 用 户 肯定 会 立即 拒绝 
请 求 ， 可 能 还 会 离开 你 的 网 站 。 相 反 ， 应 在 通知 为 用 户 提 供 了 有 形 利益 时 ， 再 请 求 权限 。 
例如 ， 如 果 你 打算 发 送 一 条 通知 ， 提 醒 用 户 关于 预订 的 变更 ， 那 么 在 用 户 发 起 预订 之 后 再 
请 求 权限 。 如 果 你 负责 的 是 新 闻 网 站 ， 请 考虑 在 用 户 表现 出 兴趣 之 后 ， 再 发 送 关 于 足球 新 
文章 的 通知 。 要 记 住 ， 你 只 有 一 次 请 求 机 会 一 一 如 果 你 在 用 户 看 到 价值 之 前 就 发 出 请 求 ， 
可 能 会 永远 失去 这 个 机 会 。 
接 下 来 要 考虑 消息 。 当 你 打开 浏览 器 原生 的 授权 对 话 框 时 ， 你 是 不 能 控制 消息 内 容 的 ， 呈 
现 给 用 户 的 是 <URL> wants to send you notifications ( 见 图 11-2)。 


































































































合 ”localhost:8443/my-accoun 回 :; 





Total price 


§248.99 


Confirmed 


Gotham Imperial Hotel 


1lmoperial. Plaza.Gotham. 


自 http://localhost:8443 wants to send you notifications. 


BLOCK 











图 11-2: Chrome 的 默认 通知 授权 对 话 框 
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从 用 户 的 角度 来 看 这 条 消息 ， 它 给 用 户 带 来 的 利益 是 尚 不 清楚 的 。 有 些 网 站 想 要 给 我 发 送 
通知 ， 但 是 里 面包 含 了 什么 呢 ” 是 哪 种 类 型 的 通知 ?点 击 Allow 会 导致 我 被 垃圾 信息 骚扰 
吗 ? 它 没 有 给 用 户 灌输 信心 ， 而 是 引起 了 用 户 的 疑问 与 质疑 。 

这 是 一 种 糟糕 的 用 户 体验 ， 我 们 应 该 树立 更 高 的 目标 。 

与 其 立即 触发 原生 的 授权 请 求 ， 不 如 考虑 创建 一 套 属于 你 自己 的 界面 ， 让 用 户 自 己 去 触 
发 。 在 这 套 界面 里 ， 你 可 以 控制 消息 内 容 让 用 户 清 楚 通知 是 什么 ， 以 及 他 会 收 到 哪 种 
类 型 的 消息 。 随 后 用 户 可 以 选择 启用 通知 ， 在 这 种 情况 下 ， 你 就 可 以 调用 Notification. 
requestPermission(); 用 户 也 可 以 拒绝 启用 通知 。 是 的 ， 这 确实 增添 了 一 个 额外 的 步骤 ， 
在 授权 时 需要 用 户 点 击 两 次 ， 但 是 这 种 做 法 几乎 总 是 能 够 带 来 更 高 的 转化 率 。 

创建 属于 你 自己 的 界面 来 提供 通知 ， 有 两 个 好 处 。 

(1) 如 果 用 户 拒绝 了 你 的 建议 ， 你 可 以 在 将 来 再 次 尝试 提供 建议 。 如 果 用 户 
拒绝 了 浏览 器 的 requestPermission() 对 话 框 ， 你 就 不 能 再 次 请 求 了 。 

(2) 随后 ， 你 可 以 复 用 这 个 订阅 通知 的 界面 ， 供 用 户 取消 订阅 。 
















































































说 到 消息 ， 销 售 人 员 有 和 名 老话 说 得 好 : 不 要 试图 推销 产品 的 功能 ， 而 要 推销 它 的 好 处 。 这 
不 是 要 你 使 用 一 些 虚伪 的 营销 技巧 ， 而 是 说 要 确保 用 户 能 够 理解 你 在 提供 什么 ， 而 用 户 需 
要 同意 什么 。 

在 编写 消息 时 ， 不 要 只 提供 功能 (例如 “开启 推送 消息 ”)， 而 要 描述 用 户 会 获得 的 好 处 
(例如 “在 订单 发 货 时 收 到 通知 ”)。 

你 认为 图 11-3 所 示 的 两 个 消息 中 ， 哪 一 个 能 够 导致 更 高 的 转换 率 ? 



































11-3， 两 种 不 同 的 通知 方式 

作为 用 户 ， 右 图 中 消息 带 给 我 的 好 处 是 显而易见 的 。 消 息 对 我 而 言 非常 重要 ， 我 宁愿 额外 
点 击 17 次 (如 果 必 须 的话 ) ， 只 要 不 错过 我 的 预订 发 生 的 变化 。 

让 我 们 看 看 如 何 提升 哥 谭 帝国 酒店 通知 的 用 户 体验 。 

在 my-account.js 中 ， 将 offerNotification() 函数 修改 为 以 下 内 容 : 
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var offerNotification = function() { 
if ("Notification" in window && 
"PushManager" in window && 
"serviceWorker" in navigator) { 
if (Notification.permission !== "granted") { 
showNotificationOoffer(); 
} else { 
subscribeUserToNotifications(); 


3 
旧 的 代码 总 是 会 调用 subscribeUserToNotifications() (在 必要 时 请 求 授权 ， 随 后 在 必要 时 
创建 订阅 )， 现 在 我 们 只 会 在 用 户 已 经 授予 通知 权限 时 才 调用 它 。 否 则 ， 我 们 不 希望 立即 触 
发 原生 的 授权 对 话 框 ， 而 是 使 用 我 们 自己 的 对 话 框 。 我 们 调用 showNotification0ffer()， 
这 个 方法 会 显示 一 个 div (#offer-notification)， 其 中 包含 了 一 个 打开 通知 的 链接 。 


在 my-accountjs 的 底部 添加 下 列 代码 ， 确 保 在 点 击 div 内 的 通知 链接 时 ，subscribeUser- 
ToNotifications() 会 被 调用 : 

















$("#offer-notification a").click(function(event) { 
event.preventDefault(); 
hideNotificationOoffer(); 
subscribeUserToNotifications(); 


}); 


我 们 所 做 的 两 次 改动 都 很 小 。 如 果 用 户 尚未 授权 ， 我 们 就 不 再 在 用 户 发 起 预订 时 调用 
subscribeUserToNotifications()。 相 反 ， 我 们 显示 自己 的 提供 通知 的 界面 元 素 ， 并 且 只 在 
用 户 选 择 同意 时 ， 才 调用 subscribeUserToNotifications()。 


通过 这 种 方式 ， 我 们 就 能 控制 消息 的 时 机 ， 只 有 在 知道 给 用 户 提 供 了 真正 的 好 处 后 才 显示 
出 来 。 同 时 我 们 也 控制 了 消息 ， 并 让 用 户 清楚 它 的 好 处 。 


11.7 渐进 式 Web 应 用 的 设计 
由 于 我 们 的 应 用 已 经 脱离 了 传统 Web 的 界限 ， 因 此 其 设计 也 需要 进行 调整 。 


从 应 用 在 主屏 幕 上 的 图 标 开 始 ， 然 后 针对 每 种 媒介 的 限制 调整 设计 (例如 ， 全 屏 渐 进 式 
Web 应 用 没有 地 址 栏 和 回 退 按钮 ， 在 网 站 模式 下 改变 屏幕 方向 等 )， 最 后 ， 无 论 网 络 条 件 
如 何 变化 ， 都 能 对 应 用 充满 信心 。 


11.7.1 设计 应 该 反映 条 件 的 变化 
我 们 在 口头 上 讨论 了 要 反映 网 络 条 件 的 变化 ， 但 是 这 也 可 以 通过 视觉 传达 出 来 。 


你 的 应 用 可 以 自动 禁用 或 者 隐藏 离线 不 可 用 的 按钮 或 者 功能 ， 其 至 可 以 修改 这 些 按钮 ， 以 
帮助 用 户 理解 将 要 发 生 的 情况 (例如 ， 将 发 送 按 钮 修改 为 “ 稍 后 发 送 ” 按 钮 )。 


考虑 一 个 渐进 式 Web 应 用 ， 当 你 访问 这 个 应 用 时 ， 有 大 量 的 动态 内 容 是 按 需 缓存 的 。 对 于 在 
离线 时 访问 应 用 的 用 户 ， 可 能 只 有 某 些 内 容 是 可 用 的 。 你 如 何 将 这 一 点 通过 视觉 反映 给 用 户 ? 


一 个 很 好 的 例子 是 Housing.com， 它 是 印度 的 一 个 顶级 房地产 平台 。 
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当 访 问 者 离线 访问 Housing.com 时 ， 那 些 没有 缓存 的 列表 和 城市 会 是 灰色 的 、 不 能 选中 的 ， 
而 那些 已 经 缓存 的 内 容 会 正常 显示 。 这 个 区 别 比较 微妙 ， 但 是 非常 清晰 ( 见 图 11-4)。 
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图 11-4: Housing.com 在 离线 时 反映 内 容 的 可 用 性 


连接 性 并 不 是 你 的 设计 能 够 反映 的 唯一 变化 条 件 。 例 如 ， 你 可 以 根据 用 户 是 否 授予 通知 权限 
来 修改 你 的 界面 ， 或 者 显示 一 个 启用 通知 的 按钮 ， 或 者 显示 控件 来 自 定 义 需 要 显示 哪些 通知 。 


11.7.2 ”设计 应 该 适应 运行 环境 

现在 ， 你 的 应 用 (和 你 的 品牌 ) 可 以 在 浏览 器 之 外 、 用 户 的 主屏 幕 上 显示 ， 请 确保 它 
可 以 适应 主屏 幕 ， 否 则 它 就 会 像 拇 指 一 样 突出 。 请 不 要 在 所 有 平台 上 重用 已 有 的 图 标 
或 favicon。 安 时 主屏 幕 上 的 图 标 、Windows 10 瓦 片 、Safari 固定 标签 、MacBook Pro 的 
Touch Bar 图 标 ， 它 们 之 间 的 区 别 很 大 。 要 了 解 关于 应 用 图 标 适 配 各 种 媒介 的 更 多 细节 ， 
请 参阅 9.4 节 。 


11.7.3 设计 应 该 适应 每 种 媒介 的 特殊 性 
考虑 一 下 ， 你 的 应 用 在 全 屏 模式 下 运行 ， 与 在 Web 浏览 器 中 浏览 的 效果 是 不 一 样 的 。 缺 少 
一 个 地 址 栏 是 否 会 影响 品牌 效果 ?你 有 没有 精通 技术 的 用 户 是 通过 复制 粘贴 网 址 来 访问 你 
的 网 站 的 ? HTTPS URL 旁边 缺乏 可 视 的 安全 指示 是 否 会 影响 转化 率 ? 
解决 这 一 问题 的 一 种 方法 是 添加 额外 的 UI 元 素来 提供 类 似 的 功能 。 通 过 使 用 CSS 媒体 查 
询 ， 仅 当 显示 模式 设置 为 fullscreen 或 者 standalone 时 ， 才 显示 这 些 UI 元 素 : 
@media all and (display-mode: fuLLscreen) { 
#back-button { 
display: block; 


} 
} 
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11.7.4 设计 应 该 向 用 户 注 入 信心 并 通知 用 户 

就 像 本 章 前面 讨 论 的 口头 交流 一 样 ， 你 的 设计 也 可 以 用 来 与 用 户 交 流 ， 并 灌注 信任 感 和 
信心 。 

例如 ， 当 使 用 WhatsApp 发 送 消息 时 ， 输 入 消息 后 就 会 在 旁边 出 现 一 个 灰色 的 复 选 标记 。 
即使 用 户 离线 ， 也 会 发 生 这 种 情况 。 这 有 助 于 向 用 户 保 证 ， 不 管 是 离线 还 是 在 线 ， 消 息 会 
被 记录 在 应 用 中 并 尽快 发 送 。 如 果 你 的 应 用 也 提供 同样 的 可 靠 性 ， 可 以 向 用 户 保 证 ， 他 们 
精心 编写 的 消息 在 应 用 中 是 安全 的 。 不 要 让 用 户 感到 疑惑 。 


11.7.5 ”设计 应 该 帮助 用 户 和 企业 实现 目标 

如 果 用 户 在 飞行 模式 下 ， 你 的 旅行 软件 也 能 工作 吗 ? 这 是 一 个 很 强大 的 竞争 优势 。 请 确保 
你 的 用 户 知 道 。 

让 更 多 的 用 户 注册 推 送 通知 ， 会 有 助 于 企业 重新 召回 更 多 的 用 户 吗 ? 请 确保 与 用 户 正确 交 
流通 知 的 工作 方式 ， 并 将 它 的 好 处 传达 给 用 户 。 





























所 号 半 二 址 一 
11.8 负责 安装 提示 
本 章 前 面 介绍 了 如 何 改善 请 求 权限 发 送 通知 的 用 户 体验 。 你 可 能 想 要 改进 的 另 一 个 提示 是 
Web 应 用 安装 横 条 ， 具 体 来 说 就 是 它 的 显示 时 机 。 
安装 提示 的 显示 时 机 完全 取决 于 浏览 器 。 不 幸 的 是 ， 训 览 右 只 能 猜测 显示 安装 提示 的 最 佳 
时 间 ， 但 是 它 不 像 你 那样 了 解 应 用 或 者 用 户 。 
如 果 用 户 正在 结账 ， 而 浏览 器 决定 要 显示 安装 提示 ， 该 怎么 办 呢 ?” 你 真 的 想 在 那 一 刻 分 散 
用 户 的 注意 力 吗 ? 
幸运 的 是 ， 浏 览 器 给 予 了 你 一 些 控制 权 。 
虽然 你 不 能 控制 何 时 启动 安装 提示 ， 但 是 你 可 以 监听 浏览 器 何 时 决定 显示 它 ， 拦 截 该 事 
件 ， 并 延迟 到 之 后 再 显示 (或 者 是 取消 显示 ) : 
window.addEventListener("beforeinstallprompt", function(promptEvent) { 
promptEvent.preventDefault(); 
setTimeout(function() { 
promptEvent.prompt(); 


}, 2000); 
}); 


这 段 代 码 监听 了 beforeinstaLLprompt 事件 ， 并 在 其 触发 时 在 事件 上 调用 preventDefault()， 
以 阻止 安装 提示 显示 出 来 。 随 后 ， 它 会 在 等 待 两 秒 钟 之 后 ， 使 用 事件 的 prompt() 方法 ， 手 
动 启动 安装 提示 的 显示 。 

其 中 一 个 有 趣 的 实现 来 自 于 Flipkart， 它 是 印度 最 大 的 电子 商务 零售 商 之 一 。Flipkart 首页 
头 部 的 右 侧 包含 了 一 个 小 加 号 图 标 (如 图 11-5 ( 左 ) 所 示 )。 这 个 图 标 会 不 时 摇动 ， 诱 导 
用 户 尝 试点 击 它 。 点 击 之 后 ，Flipkart 就 会 显示 一 个 蒙 层 ， 指 引用 户 如 何 添加 Flipkart 的 主 
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屏 快捷 方式 (如 图 11-5( 中 ) 所 示 )。 但 是 ， 如 果 在 浏览 器 尝试 显示 应 用 安装 横 条 之 后 点 击 
这 个 链接 一 一 Flipkart 此 时 已 经 把 引用 拦截 并 存储 了 下 来 一 一 就 会 显示 应 用 的 安装 横 条 (如 
图 11-5 ( 右 ) 所 示 )。 
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图 11-5: 将 Flipkart 添加 到 主屏 的 体验 
和 推送 通知 一 样 ， 控 制 时 机 与 消息 是 给 用 户 提供 美好 体验 的 关键 。 


11.9 ”使 用 RAIL 测 量 性 能 并 实现 高 性 能 

一 且 将 应 用 放 在 主屏 幕 上 ， 它 和 原生 应 用 就 是 无 法 区 分 的 。 正 如 一 名 不 太 相 关 的 俗语 所 
说 : 能 力 越 大 ， 期 望 越 大 。 当 渐进 式 Web 应 用 在 用 户主 屏 上 获得 了 和 其 他 原生 应 用 同等 的 
地 位 时 ， 它 最 好 能 够 像 原生 应 用 一 样 流畅 地 运行 。 

我 们 已 经 讨论 过 渐进 式 Web 应 用 的 许多 强大 的 新 功能 ， 这 些 功能 使 得 它们 可 以 和 原生 应 用 
一 样 强大 。 但 同样 重要 的 是 使 用 的 感受 。 

应 用 需要 在 用 户 使 用 时 提供 良好 的 感受 。 

要 做 到 这 一 点 ， 应 用 需要 性 能 好 、 响 应 快 、 操 作 流 畅 。 只 有 具备 某 些 特 点 ， 才 能 让 它 感 
觉 正确 。 这 是 一 款 能 够 迅速 响应 用 户 点 击 的 应 用 与 老式 Web 的 体验 之 间 的 不 同 。 在 老式 
Web 中 ， 用 户 在 点 击 之 后 要 等 待 很 长 时 间 ， 怀 疑点 击 是 否 注册 了 ， 有 时 候 甚 至 要 点 击 第 二 
次 来 进行 确认 。 当 一 个 应 用 的 感受 良好 时 ， 所 有 这 些 疑 虑 都 会 消失 。 

要 将 这 种 对 响应 和 性 能 的 主观 感受 转化 成 可 以 测量 并 实现 的 东西 ， 可 以 使 用 RAIL 模型 。， 
RAIL 不 是 一 种 新 技术 或 者 新 工具 ， 它 仅仅 是 一 套 指导 方针 ， 可 以 帮助 我 们 理解 什么 可 以 
使 一 款 应 用 (原生 、 渐 进 式 或 者 普通 网 站 ) 的 感受 良好 。 和 许多 技术 名 词 一 样 ，RAIL 是 
一 个 缩写 词 ， 表 示 我 们 需要 记 住 的 准则 : 响应 性 、 动 画 、 空 亲 和 加 载 。 
































注 1: RAIL 是 由 Paul Irish 和 Paul Lewis 创造 并 定义 的 。 
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响应 (Response) 

当 用 户 执行 任何 操作 时 ， 例 如 点 击 屏幕 上 的 任何 元 素 ， 我 们 希望 能 在 0.1 秒 内 做 出 响应 。 

你 能 在 这 个 时 间 内 显示 用 户 请 求 的 信息 吗 ? 如 果 能 ， 这 会 非常 棒 ! 如 果 不 行 ， 你 能 否 将 

屏幕 内 容 过 渡 到 用 户 请 求 的 结果 呢 (即使 它 还 没有 包含 实际 的 数据 ) ? “如 果 你 做 不 到 

这 一 点 ， 至 少 可 以 表明 ， 用 户 的 操作 已 被 检测 到 ， 并 且 某 件 事情 正在 发 生 。 最 简单 的 方 

式 就 是 显示 一 个 加 载 指示 器 。 

只 要 你 能 在 100 毫秒 内 对 用 户 操作 表现 出 某 种 响应 ， 就 会 像 是 瞬间 响应 一 样 。 努 力 给 用 
户 提 供 一 种 应 用 即时 响应 的 感觉 。 不 要 让 用 户 怀疑 他 是 否 点 击 了 正确 的 东西 ， 或 者 怀疑 
是 否 应 该 再 点 击 一 次 。 
记 住 牛顿 第 三 定律 : 对 于 每 一 个 操作 ， 都 应 该 有 一 个 瞬间 的 响应 。 别 跟 牛 顿 作 对 。 

动画 (Animation) 
要 让 动画 在 人 眼中 看 起 来 疲 畅 ， 它 每 秒 至 少 需要 更 新 60 次 。 
要 达到 每 秒 60 帧 ， 意 味 着 每 16.66 (1000/60) 毫秒 要 更 新 一 次 屏幕 。 由 于 浏 览 器 还 需 
要 一 些 时 间 来 将 新 的 帧 绘制 到 屏幕 上 ， 事 实 上 每 一 帧 只 能 获得 10 到 12 上 毫秒 的 时 间 。 
请 记 住 ， 当 我 们 讨论 动画 时 ， 指 的 是 页 面 在 用 户 滚动 时 的 样子 。 当 用 户 滚动 时 页 面 会 卡 
顿 ， 通常 比 起 动画 中 任何 其 他 延迟 还 要 糟糕 。 

空闲 〈ldle) 
将 非 必 要 的 工作 推迟 到 空 闪 时 间 。 
“ 非 必 要 ” 指 的 是 任何 不 属于 响应 、 动 画 或 者 加 载 的 部 分 。 用 户 是 否 在 滚动 一 个 无 限 长 
的 条 目 列 表 ? 确保 在 加 载 和 渲染 下 一 批 条 目 时 ， 不 会 导致 深 动 “冻结 ”或 者 看 起 来 卡 
顿 。 你 需要 下 载 并 缓存 一 些 资源 ， 以 供 下 次 用 户 访问 吗 ? 请 确保 它 不 会 减缓 用 户 当 前 的 
访问 速度 。 

加 载 (Load) 

当 用 户 执行 一 个 操作 ， 例 如 在 网 站 上 请 求 页 面 时 ， 你 的 目标 是 在 一 秒 之 内 显示 操作 的 

沼 不 o 

侍 心 壮志 ? 也 许 吧 。 

可 能 吗 ? 有 了 service worker、CacheStorage、IndexedDB 和 其 他 一 些 现 代 化 工具 包 ， 答 

案 是 肯定 的 。 

记 住 ， 你 不 需要 在 一 秒 之 内 加 载 整个 应 用 ， 只 需 让 用 户 感觉 应 用 已 经 加 载 即 可 。 有 些 时 

候 ， 只 需 加 载 首 屏 的 内 容 ， 并 将 其 余部 分 延迟 到 空闲 时 间 加 载 ， 就 可 以 帮助 你 实现 这 一 

点 〈 见 图 11-6) 。 
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注 2; 你 可 以 在 图 11-6 中 看 到 一 个 很 好 的 示例 。 
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图 11-6: Housing.com 的 搜索 页 面 在 结果 可 用 之 前 就 已 经 演 染 出 来 


RAIL 的 指导 原则 是 : 

。 在 100 毫秒 或 者 更 短 时 间 内 ， 显 示 对 用 户 操作 的 某 种 响应 ; 

。 确保 每 16 秒 (或 者 更 短 ) 绘制 一 次 屏幕 动画 ; 

。 在 页 面 空闲 时 执行 工作 ， 每 次 不 超过 50 毫秒 ; 

。 在 1000 毫秒 内 加 载 并 显示 用 户 请 求 的 内 容 。 

实现 这 些 目标 的 具体 细节 超出 了 本 书 的 讨论 范围 。 你 可 以 在 https:// pwabook.com/ 
performancelinks 找到 许多 方便 的 资源 来 开启 你 的 性 能 改进 工作 。 


11.10 小结 


渐进 式 Web 应 用 为 我 们 带 来 了 新 的 UX 挑战 。 但 是 处 理 得 当时 ， 渐 进 式 Web 应 用 也 会 带 
来 很 多 提升 用 户 体验 和 Web 应 用 成 功率 的 好 机 会 。 

有 些 内 容 可 以 直接 添加 到 应 用 中 ， 无 须 过 多 考虑 对 用 户 体 验 造成 的 影响 ， 而 其 他 内 容 则 
必须 经 过 仔细 思考 才能 添 加 。 缓 存 静态 资源 并 且 始 终 从 缓存 中 提供 资源 就 是 明摆着 的 事 
情 ， 但 是 如 果 你 添加 推送 通知 的 计划 中 仅 包 含 引 入 一 些 代码 ， 在 用 户 一 打开 首页 时 就 请 
求 推送 权限 的 话 ， 你 会 收 到 一 封 来 自 管理 人 员 的 有 趣 邮 件 ， 其 中 会 涉及 漏斗 、 转 化 率 和 
KPI 的 问题 。 


最 后 ， 用 户 体验 比 其 他 任何 事情 都 重要 。 


当 你 使 用 本 书 中 描述 的 任何 技术 时 ， 第 一 步 都 是 要 停 下 来 思考 这 些 变化 会 如 何 影响 用 户 
体验 。 
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渐进 式 Web 应 用 的 未 来 


让 我 们 花 点 时 间 ， 看 看 目前 完成 的 工作 。 


我 们 创建 的 渐进 式 Web 应 用 在 用 户主 屏 上 占有 一 席 之 地 。 它 启动 时 会 以 全 屏 模式 运行 。 无 
论 用 户 在 线 还 是 离线 ， 或 者 介 于 两 者 之 间 ， 它 都 是 可 用 、 快 速 且 功能 完备 的 。 它 甚至 可 以 
在 用 户 离开 网 站 之 后 ， 向 其 推送 预订 详情 的 变化 。 

除了 不 需要 去 应 用 商店 安装 应 用 之 外 ， 我 们 创造 的 内 容 与 原生 应 用 难以 区 分 ， 其 至 比 原生 
应 用 更 好 。 

如 果 你 能 想到 任何 优势 或 者 特性 是 原生 应 用 有 而 渐进 式 Web 应 用 没有 的 ， 可 能 它 已 经 存在 
了 或 者 正在 实现 中 了 。 

在 最 后 一 章 ， 我 们 会 快速 介绍 其 中 一 些 新 技术 ， 包 括 轻 松 接受 支付 的 能 力 、 简 单 用 户 登 录 
的 凭证 管理 、 实 时 3D 图 像 演 染 、 虚 拟 现 实 等 。 我 们 不 会 深入 研究 这 些 技 术 ， 其 中 一 些 还 
没有 成 型 ， 但 是 我 们 会 做 简短 的 介绍 ， 指 引 你 去 哪里 可 以 学 习 更 多 内 容 。 


12.1 使 用 Payment Request API 接 受 支付 请 求 


在 线 支付 ， 尤 其 是 在 移动 设备 上 ， 从 来 不 是 一 件 容易 的 事情 因为 开发 者 要 尝试 对 
妆 支 付 ， 而 且 用 户 要 为 填写 长 长 的 结账 表单 而 挣扎 。 


虽然 大 多 数 在 线 购物 已 经 可 以 在 手机 上 完成 ， 但 是 用 户 在 台式 机 上 完成 交易 的 可 能 性 比 移动 
设备 更 大 。 原 因 很 明显 te hi i 
购物 时 的 信任 和 安全 问题 i 影响， 难怪 移 动 设备 的 支付 转化 率 比 桌面 设备 要 差 。" 





































































































注 1: 参见 2016 年 Monetate Ecommerce Quarterly Report, “How is everyone shopping, anyway?”。 
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应 用 商店 为 想 要 寻找 应 用 收费 或 者 订阅 收费 的 原生 应 用 开发 者 解决 了 一 部 分 问题 。 他 们 为 
键 购买 提供 了 可 信 的 、 共 同 的 用 户 体验 。 而 Payment Request API 就 能 给 Web 带 来 了 相 

同 的 体验 。 

它 的 目标 就 是 消除 宛 长 繁琐 的 结算 表单。 

对 用 户 来 说 ，Payment Request API 提供 了 标准 化 的 支付 界面 ， 是 属于 设备 原生 的 。 它 简化 

了 定义 支付 方法 和 发 货 地 址 的 过 程 ， 在 结账 付款 时 ， 用 户 可 以 轻松 进行 选择 ( 见 图 12-1)。 

















4 4019| 


回 nitps/www.gothamimperialhotel.com 同 haps/wwwgothamimperialhotel.com 


Enter the CVC for Visa ，。1234 


Once you confirm, your card details will be 


shared with this site 


CANCEL 





x Gotham Imperial Hotel Reservations x 
gothamimperialhotel.com 


Order summary 


1 night stay USD $222.99 
Payment 

a VISA 
Visa **** 1234, Tal Ater 


EDIT 

















图 12-1: 使 用 Payment Request API 进行 结算 


对 于 开发 者 来 说 ，Payment Request API 提供 了 一 种 大 幅 简 化 的 方法 ， 将 支付 整合 到 网 站 中 : 


var SupportedPaymentMethods = [{ 
supportedMethods: ["basic-card"], 


data: { 
supportedNetworks: ["visa", "mastercard", "amex", "discover", "diners"] 
} 
}]; 


var orderDetails = { 
displayItems: [ 
{ label: "1 night stay", amount: { currency: "USD", value: "222.99" } }， 
{ label: "Holiday discount", amount: { currency: "USD", value: "-22.00" } } 
] ， 
total: { 
label: "Total due", amount: { currency: "USD", value: "200.99" } 
} 
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}; 


var request = new PaymentRequest(supportedPpaymentMethods, orderDetails); 
request. show(); 


轻松 接受 应 用 和 订阅 的 支付 ， 可 能 是 原生 应 用 相 比 Web 的 最 后 一 个 优势 了 。 随 着 Payment 
Request API 提供 一 种 更 加 优雅 的 方式 来 支付 任何 东西 ，Web 再 次 取得 领先 。 


12.2 使 用 Credential Management API 进 行 用 
户 管理 


对 于 大 多 数 希 望 提供 定制 化 用 户 体验 的 Web 应 用 ， 用 户 需 要 登录 ， 并 在 各 个 会 话 之 间 保 持 登 
录 状 态 。 这 通常 意味 着 用 户 需要 注册 、 创 建 密码 、 记 住 密码 ， 并 经 常 使 用 它 来 登录 到 该 服务 。 
但 是 ， 在 移动 设备 上 记 住 或 者 存储 密码 是 一 件 麻烦 事 ， 以 至 于 用 户 可 能 会 简单 地 重用 同一 
个 密码 来 登录 所 有 访问 的 站 点 ， 或 者 是 在 移动 设备 的 网 站 上 忽略 登录 (我 是 坚定 的 第 二 群 
人 )。 由 于 在 移动 端 登录 非常 麻烦 ， 很 多 用 户 往往 仅仅 因为 这 个 原因 就 选择 安装 原生 应 用 ， 
而 不 是 使 用 Web 应 用 。 

为 了 解决 这 个 问题 ， 一 个 称 为 Credential Management API 的 新 标准 就 出 来 了 。 

Credential Management API 让 开发 者 可 以 大 大 简化 用 户 体验 。 用 户 一 键 即 可 登录 ， 并 且 在 
会 话 过 期 时 可 以 自动 登录 ， 甚 至 还 可 以 记 住 曾 经 登录 的 联合 账号 (例如 Facebook Connect、 
谷歌 账号 等 )， 并 使 用 它们 登录 ( 见 图 12-2)。 和 凭证 会 本 地 存储 在 浏览 器 中 ， 甚 至 可 以 在 某 
些 浏 览 嚣 中 在 设备 间 同 步 。 










































































www.gothamimperial.com 


Choose an account saved with the 
browser to sign in 


gothamimperialhotel.com 


tal@talater.com 
with accounts.google.com 


Tal Ater 
BY” talQ@talater.com 


CANCEL 














12-2: 使 用 Credential Management API 登录 


如 何 使 用 Credential Management API 可 以 根据 你 的 网 站 需求 而 定 。 常 见 的 工作 流 如 下 。 


(1) 用 户 点 击 登 录 按 钮 ， 网 站 使 用 Credential Management API 显示 出 本 地 账号 选择 器 的 
界面 。 
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(2) 如 果 用 户 登 录 成 功 ， 网 站 使 用 Credential Management API 将 凭证 信息 存储 起 来 ， 以 供 将 
来 使 用 。 
(3) 如 果 用 户 过 去 已 登录 ， 并 且 会 话 过 期 ， 网 站 会 重新 登录 该 用 户 。 


12.3 WebGL 实 时 图 像 处 理 
在 很 长 一 段 时 间 里 ， 如 果 你 想 让 游戏 或 者 应 用 为 用 户 带 来 强烈 的 视觉 冲击 ， 你 的 唯一 选择 
就 是 转 原 生 。DOM 根本 不 适合 用 来 处 理 高 级 实时 图 形 的 处 理 要 求 。 


如 今 ，WebGL 在 桌面 和 移动 端 浏览 器 中 被 广泛 支持 ， 让 我 们 可 以 创建 实时 GPU 加 速 的 图 
形 ( 见 图 12-3)。 

































































12-3: 使 用 WebGL 进行 实时 3D 泻 染 


oe PC 和 控制 台 上 的 原生 应 用 或 视频 游戏 那样 ， 编 写 这 样 的 高 级 图 形 ， 需 要 更 多 的 数 
、 三 角 学 专业 知识 ， 并 不 是 我 可 以 在 大 多 数 周一 内 能 收集 的 。 计 算 摄 影 机 视角 、 光 圈 ， 
以 及 在 和 人 C 语言 的 GLSL 语言 中 编写 自 定 义 着 色 器 ， 让 WebGL 入 门 的 挑战 变 得 相当 大 。 


幸运 的 是 ， 在 游戏 领域 已 经 诞生 了 许多 项 目 ， 简 化 了 JavaScript 开发 者 创建 游戏 和 编写 高 
级 2D、3D 图 形 的 难度 。 


其 中 最 流行 的 是 threejs， 它 可 以 轻松 让 你 设置 3D 或 者 2D 场景 ,添加 摄影 机 、 几 何 图 形 、 
材质 等 。 


var scene = new THREE.Scene(); 

var camera = new THREE.PerspectiveCamera(75, 1.33, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 

renderer .setSize(400, 300); 

var geometry = new THREE.BoxGeometry(1, 1, 1); 

var material = new THREE.MeshBasicMaterial({color: Ox00ff00}); 
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 

camera.position.z = 5; 
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12.4 未 来 的 语音 识别 API 


很 少 有 一 种 技术 ， 既 能 提供 令 人 惊讶 的 、 流 畅 的 、 未 来 派 的 用 户 体验 ， 又 能 为 所 有 用 户 提 
高 可 用 性 和 可 访问 性 。 但 是 ， 语 音 识别 做 到 了 。 它 为 我 们 提供 了 一 种 全 新 的 方式 来 与 数字 
设备 通信 。 这 种 方式 既 有 未 来 感 又 很 自然 ， 同 时 也 增强 了 可 用 性 ， 并 为 我 们 的 工作 流程 加 
速 。 这 是 一 个 全 新 的 用 户 接 口 ， 是 我 们 之 前 未 曾 用 过 的 。 


ee 然而 ， 如 今 的 浏览 器 已 经 有 了 标准 API 来 进行 语 
音 识别 。 这 个 API 为 Web 开发 者 提供 了 轻松 易 用 的 接口 ， 同 时 将 背后 的 复杂 技术 细 市 交 
给 了 浏览 内 实现 。 

















var _ recognition = new SpeechRecognition(); 
recognition.onresult = function(event) { 
console.log("User said: ", event.results[event.resultIndex][0]); 

}; 

recognition.start(); 
这 个 易于 实现 的 API 对 开发 者 来 说 是 个 好 消息 。 不 幸 的 是 ， 也 有 坏 消息 。 由 于 实际 的 语音 识 
A Le olde A 少数 浏览 器 实现 了 这 个 API。 在 本 书 编写 时 ， 语 

音 识别 可 以 在 谷歌 浏览 器 的 桌面 版 和 移动 版 上 正常 运行 ， 在 Firefox 中 也 很 快 就 可 以 使 用 。 


对 于 尚未 支持 这 个 API 的 浏览 器 ， 要 进行 语音 识别 ， 可 以 使 用 WebRTC 访 
问 麦 克 风 ， 然 后 使 用 微软 必 应 语音 API 或 者 谷歌 云 语音 API 进行 云端 的 语 


音 识别 。 














要 通过 对 开发 者 更 加 友好 的 方式 添加 语音 识别 到 你 的 网 站 ， 请 参阅 https://pwabook.com/ 
annyang。 
annyang 处 理 了 浏览 器 之 间 的 许多 不 一 臻 性， 并 且 尽 可 能 简单 地 定义 了 语音 命令 : 


annyang.addCommands({ 
"What year is this?": function() { 
console.log("It is", new Date().getFullYear()); 
} 
]); 


annyang.start(); 


12.5 ”使 用 WebVR 在 浏览 器 中 实现 虚拟 现实 


VR (虚拟 现实 )，Web 不 甘 落后 ， 现 在 已 经 拥有 自己 的 标准 API 来 和 VR 设备 进行 交 
互 ， 其 中 包括 Oculus Rift、HTC Vive、Google Cardboard 和 Samsung Gear VR。 


WebVR 暴露 了 一 个 JavaScript API， 用 于 与 设备 显示 器 进行 交互 (包括 单独 泻 染 给 每 只 眼 
睛 )、 通 过 VR 输入 设备 (包括 六 个 自由 度 设 备 ) 进行 输入 处 理 、 读 取 用 户 的 姿势 等 。 


和 WebGL 一 起 使 用 ，WebVR 可 以 让 你 呈现 出 复杂 、 令 人 信服 的 VR 体验 。 
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12.6 ”轻松 共享 应 用 


有 两 个 新 的 API 正在 开发 中 ， 旨 在 让 共享 内 容 、 链 接 和 媒体 变 得 更 加 容易 ， 它 们 是 Web 
Share API 和 Web Share Target API。 本 质 上 ， 这 两 个 API 就 像 是 同一 个 硬币 的 两 面 。 
如 今 ， 当 用 户 想 要 分 享 在 网 络 上 找到 的 某 些 内 容 时 ， 他 们 有 两 种 选择 : 要 么 使 用 内 置 在 浏览 
器 界面 中 的 分 享 按钮 (如 果 有 的 话 )， 要 么 使 用 网 站 上 的 分 享 按钮 一 一 这 是 由 网 站 所 选择 的 、 
用 来 提供 特定 Web 服务 的 按钮 〈 例 如 点 赞 按钮 、Twitter 转 推 按钮 、Google +1 按钮 等 )。 
Web Share API 允许 网 站 添加 一 个 通用 的 分 享 按钮 ， 来 触发 设备 的 原生 分 享 界面 一 一 这 个 
界面 会 由 用 户 安装 在 设备 上 的 原生 应 用 来 填充 : 

navigator.share({title: "Gotham Imperial", url: window.Tlocation.href}); 
而 Web Share Target API 可 以 让 Web 应 用 进行 注册 ， 以 便 处 理 分 享 事件 ， 就 像 原生 应 用 那样 。 
通过 Web 应 用 清单 ， 可 以 将 应 用 注册 为 分 享 目标 : 

{ 


"short_name": "ImperialApp", 
"name": "Gotham Imperial Hotel", 
"Supports_share": true 


} 
一 旦 注册 成 功 ， 应 用 会 出 现在 原生 分 享 界面 中 ， 就 像 其 他 原生 应 用 一 样 ( 见 图 12-4) 。 







































































回 nttps/www.gothamimperial.com 


Share via 


国 0O 





ImperialApp Pushbullet 


六 多 


Messenger Instagram 














图 12-4: 将 PWA 整合 到 原生 分 享 界面 中 





此 时 ， 应 用 的 service worker 可 以 响应 share 事件 ， 处 理 实际 的 分 享 : 


navigator .actions.addEventListener("share", function (event) { 
var url = event.data.url; 
var title = event.data.title; 
var text = event.data.text; 
myShareFunction(url, title, text); 


}); 


这 两 个 API 本 质 上 是 将 社交 分 享 大 众 化 ， 并 且 创 造 了 公平 的 竞争 环境 。 这 使 得 用 户 可 以 选 
择 用 什么 应 用 来 分 享 ， 并 使 得 开发 者 可 以 将 他 们 的 Web 应 用 用 于 社交 分 享 。 
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在 本 书 编写 时 ， 这 两 个 API 的 细节 仍 在 最 后 确定 中 。 本 节 中 所 示 的 代码 可 
能 无 法 反映 最 终 的 API。 要 了 解 更 新 的 情况 ， 请 参考 https://pwabook.com/ 


webshareapis。 











12.7 流畅 的 媒体 播放 UI 


如 果 你 在 开发 一 个 渐进 式 Web 应 用 来 播放 音频 或 者 视频 ， oo 新 的 Media 
Session 标准 允许 你 控制 媒体 如 何 显示 到 用 户 设备 上 ， 并 让 用 户 可 以 通过 通知 栏 、 锁 定 屏幕 
甚至 是 Android Wear 这 样 的 可 穿戴 式 设备 ， 进 行 媒体 的 播放 控制 。 


即便 没有 定义 任何 内 容 ， 浏 览 器 也 可 以 在 任何 页 面 播放 音 视频 时 ， 在 通知 栏 中 显示 通知 
通知 包括 了 浏览 器 基于 播放 媒体 的 页 面 或 者 应 用 ， 做 出 的 对 于 标题 的 最 佳 猿 测 。 


Mid Session API 允许 你 设置 媒体 播放 时 要 显示 的 元 数据 (并 在 下 一 个 曲目 开始 播放 时 进 
行 更 新 )， 包 括 标题 、 艺 术 家 、 专 辑 和 作品 。 它 还 允许 你 设置 用 户 点 击 播放 、 和 暂停 、 上 一 
下 一 个 按钮 或 者 搜寻 控件 时 ， 调 用 的 事件 处 理 器 ( 见 图 12-5)。 


navigator .mediaSession.metadata = new MediaMetadata({ 
title: "New Year's Mix", 
artist: "Gotham Imperial Hotel", 
album: "Gotham 2017", 
artwork: [{ src: "newyearmix.jpg" }] 


}); 

















navigator .mediaSession.setActionHandler("play", function() {}); 
navigator .mediaSession.setActionHandler("pause", function() {}); 
navigator .mediaSession.setActionHandler("seekbackward", function() {}); 
navigator .mediaSession.setActionHandler("seekforward", function() {}); 
navigator .mediaSession.setActionHandler("previoustrack", function() {}); 
navigator .mediaSession.setActionHandler("nexttrack", function() {}); 





ETEE 
2 Cy ©: 


Flashlight Mobile Bluetooth 
Hotspot 


Auto 


New Years Mix 
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图 12-5: 渐进 式 Web 应 用 的 富 媒体 控制 
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使 用 Media Session 标准 以 及 本 书 中 描述 的 技术 ， 你 就 可 以 创建 功能 完备 的 媒体 播放 器 ， 其 
中 包括 了 完整 的 播放 列表 控件 、 在 离线 时 播放 音 视频 ， 其 至 允许 用 户 控 制 来 自 于 已 连接 设 
的 回放 。 


12.8 下 一 个 伟大 时 代 

本 书 第 1 章 第 一 节 的 标题 是 “Web 反击 战 ?， 真 的 再 没有 更 加 合适 的 方式 来 描述 目前 正在 
发 生 的 转变 了 。 

在 Web 初期 ， 一 切 都 是 新 的 。 人 们 蜂拥 到 台式 机 上 ， 无 限 地 获取 信息 ， 甚 至 第 一 次 在 网 上 
购物 。 

帝国 崛起 ， 财 富 创 造 

随后 iPhone 诞生 ， 伴 随 而 来 的 是 移动 互联 网 的 新 时 代 。 但 是 那 时 候 是 2007 年 〈IE7 的 全 


盛 时 期 )， 移 动 Web 还 没有 准备 好 用 户 想 要 的 丰富 体验 。 因 此 ， 当 苹果 的 应 用 商店 在 一 年 
后 上 市 时 ， 原 生 应 用 很 快 抢 走 了 风头 。 


帝国 崛起 ， 财 富 创造 


Web 一 直 是 民主 化 获取 信息 和 公平 竞争 的 一 个 很 好 的 均衡 器 。 但 是 移动 应 用 生态 系统 却 变 
成 了 过 于 饱和 的 、 管 制 的 ， 并 且 严 重 倾斜 向 拥有 雄厚 资金 的 开发 商 。 

但 是 ， 轮 子 总 是 在 不 断 转 动 ， 现 在 Web 又 回 到 了 前 沿 。 

有 了 渐进 式 Web 应 用 ， 用 户 不 再 需要 一 次 安装 几 十 个 应 用 来 访问 他 们 所 需 的 数据 。 如 果 用 
户 选择 不 安装 原生 应 用 ， 他 们 就 不 再 需要 在 体验 上 做 出 妥协 。 用 户 不 再 需要 经 历 长 长 的 安 
装 漏斗 ， 并 给 予 每 个 应 用 无 尽 的 权限 。 用 户 可 以 享受 快速 加 载 、 离 线 访问 、 高 可 用 、 高 可 
靠 性 ， 无 论 他 们 在 哪儿 。 

有 了 渐进 式 Web 应 用 ， 开 发 者 不 再 需要 对 各 个 应 用 商店 的 规则 或 者 用 户 体验 进行 妥协 。 他 
们 不 需要 再 花 重 金 在 应 用 商店 有 限 的 “前 10 应 用 ”列表 中 保持 竞争 力 。 他 们 不 需要 再 花 
费 数 周 或 者 数 月 时 间 来 开发 ， 最 终 其 应 用 却 被 应 用 商店 因 未 知 原因 而 拒绝 。 他 们 不 需要 再 
分 别 维护 一 个 iOS 应 用 、 一 个 安 卓 应 用 和 一 个 Web 应 用 了 。 

渐进 式 Web 应 用 最 终 让 我 们 可 以 构建 适合 所 有 人 的 Web 应 用 ， 无 论 用 户 的 设备 或 者 连接 
状态 如 何 。 它 让 我 们 可 以 构建 丰富 的 体验 ， 让 用 户 可 以 长 期 使 用 ， 就 像 原 生 应 用 那样 。 
我 一 直 在 谈论 渐进 式 Web 应 用 让 我 们 可 以 构建 原生 应 用 般 的 Web 体验 。 但 是 ， 这 仅仅 是 
故事 的 开始 。 

从 Web 到 移动 Web 的 转变 ， 以 及 后 来 从 移动 Web 到 移动 应 用 的 转变 ， 让 我 们 经 历 了 以 前 
从 未 想象 过 的 体验 。 同 样 ， 转 回 到 移动 Web 将 带 来 我 们 无 法 想象 到 的 惊奇 新 体验 。 


帝国 崛起 ， 财 富 创 造 
这 真是 Web 开发 的 大 好 时 光 。 
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附录 A 
service worker: 采用 ES$2015 的 


大 好 时 机 





ECMAScript 2015 ( 又 称 为 ES2015、ES6 和 ES6 Harmony) 是 ECMAScript 语 言 规 范 
(JavaScript 实现 的 规范 ) 在 2015 年 的 更 新 ， 也 是 自从 2009 年 的 ES5 更 新 以 来 的 第 一 个 主要 
更 新 。 

ES2015 给 ECMAScript (因此 给 JavaScript) 添加 了 许多 新 的 语言 特性 ， 其 中 包括 箭头 函 
数 、 常 量 、promise、 类 、 模 块 、for/of 循环 、 模 板 字符 串 等 。 

简单 地 说 ， 它 使 得 你 在 编写 JavaScript 时 可 以 获得 更 加 愉快 的 体验 ， 并 能 帮助 你 编写 出 更 
优雅 的 代码 。 

不 幸 的 是 ， 对 于 想 要 使 用 ES2015 编码 的 开发 者 来 说 ， 还 有 很 多 用 户 依然 在 使 用 旧式 的 不 
完全 支持 ES2015 的 浏览 器 。 


这 个 问题 可 以 通过 使 用 Babel 之 类 的 工具 ， 在 编译 时 将 ES2015 代码 转换 为 ES5 旧 代 码 来 
解决 。 这 个 过 程 会 将 你 的 代码 中 任何 不 兼容 ES5 的 语法 转译 成 兼容 语法 。 不 幸 的 是 ， 很 多 
开发 人 员 对 这 个 额外 的 构建 步骤 并 不 满意 ， 或 者 选择 不 做 ， 因 此 也 就 无 法 享受 到 这 些 新 的 
语言 特性 了 。 

然而 ，service worker 提供 了 一 个 很 好 的 机 会 来 开始 使 用 ES2015。 由 于 当前 实现 了 serivce 
worker 的 所 有 浏览 器 中 ， 同 样 实现 了 大 部 分 的 ES2015 功能 ， 因 此 你 可 以 在 service worker 
文件 中 安全 地 使 用 这 些 新 功能 ， 而 不 需要 进行 转译 。 

在 我 们 的 service worker 中 ， 我 们 已 经 用 到 了 一 些 ES2015 特性 ， 包 括 promsie、string. 
includes() 和 string.startswith() 等 。 让 我 们 看 看 可 以 使 用 ES2015 来 改进 我 们 的 service 
worker 的 其 他 方法 。 
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[A 

A.1 模板 字符 串 

模板 字符 串 可 以 创建 多 行 字符 串 ， 以 及 在 字符 串 中 包含 变量 ， 写 法 更 加 优雅。 

和 封装 在 双 引 号 或 者 单 引 号 中 的 字符 串 不 同 ， 模 板 字 符 串 由 反 引 号 〈(`) 包 奏 。 通 过 使 用 
反 引 号 ， 就 可 以 将 多 行 字 符 串 和 占 位 符 包 奏 起 来 。 占 位 符 由 美元 符号 〈$) 和 花 括号 (人) 
表示 ， 其 中 可 以 包含 变量 和 表达 式 。 
比较 一 下 使 用 普通 字符 串 和 使 用 模板 字符 串 拼 竣 出 同一 个 字符 串 的 方式 。 
使 用 普通 字符 串 的 多 行 字符 串 表 达 式 : 


var message = 

"Nightly rate: " + rate + "\n"+ 
"Number of nights: " + nights + "\n"+ 
"Total price: " + (nights * rate); 


使 用 模板 字符 串 的 多 行 字符 串 表 达 式 : 


var message = 

‘Nightly rate: ${rate} 

Number of nights: S${nights} 
Total price: ${(nights * rate)}.; 


A.2 箭头 函数 

箭头 函数 提供 了 一 种 定义 函数 的 简短 语法 ， 通 常 能 够 让 代码 更 加 优雅 和 富有 表现 力 。 
要 注意 ， 与 传统 的 函数 表达 式 不 同 ， 篆 头 函 数 会 和 周围 的 代码 共享 this。 

比较 以 下 两 种 代码 实现 ， 它 们 响应 来 自 CacheStorage 的 事件 或 者 网 络 请 求 中 的 内 容 。 
传统 函数 : 


event .respondWiLth( 
Caches 
.open("cache-v1") 
.then(function(cache) { 
return cache.match(event.request); 






























































}) 
.then(function(response) { 
return response || fetch(event.request); 
}) 
); 


使 用 箭头 函数 实现 同样 的 逻辑 : 


event .respondWiLth( 
Caches 
.open("cache-v1") 
.then(cache => cache.match(event.request)) 
.then(response => response || fetch(event.request)) 


让 
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A.3 ”对 象 解构 


对 象 解构 让 你 可 以 将 对 象 中 的 特定 值 提 取 到 不 同 变量 中 : 


var reservationDetails = {nights: 3, rate: 20}; 
var {nights, rate} = reservationDetails; 
console.log("Number of nights", nights); 
console.log("Nightly rate", rate); 


其 中 一 种 常见 的 用 途 是 访问 传递 给 函数 的 对 象 参数 中 的 特定 值 。 
比较 下 面 两 个 示例 可 以 看 到 在 使 用 和 不 使 用 解构 的 情况 下 ， 如 何 访 问 传 递 给 函数 的 对 象 属 









































传递 对 象 作为 一 个 参数 : 


var reservationDetails = {nights: 3, rate: 20}; 
var logMessage = (reservation) => ConsoLe.Log( 
‘$s{reservation.nights} nights: ${reservation.nights * reservation.rate}. 


); 


logMessage(reservationDetails); 
解构 传 入 的 对 象 : 


var reservationDetails = {nights: 3, rate: 20}; 

var logMessage = ({nights, rate}) => console.log( 
‘$s{nights} nights: S${nights * rate}. 

); 


logMessage(reservationDetails); 


A.4 ES2015 的 更 多 内 容 


这 些 示例 只 是 ES2015 中 引入 的 诸多 语言 新 特性 中 的 一 小 部 分 。 
我 鼓励 你 进一步 探索 ES2015。 通 过 代码 ， 以 及 享受 其 中 ， 你 会 受益 菲 浅 。 
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全 页 间 隐 陈 三 告 





为 了 增加 应 用 的 安装 量 ， 许 多 网 站 会 使 用 全 页 间隙 式 广告 ， 将 整个 网 站 隐藏 在 一 个 移动 应 

用 的 广告 背后 。 

大 量 研究 已 经 表明 有 多 少 用 户 讨厌 这 种 广告 。 我 其 至 不 会 提供 此 类 研究 的 链接 ， 以 免 浪费 

你 的 时 间 。 你 可 能 已 经 猜 到 了 答案 。 如 果 没 有 的 话 ， 欢 迎 访问 “IDon't Want Your F***ing 

App” 的 Tumblr 页 面 。 

但 是 让 我 们 换个 角度 ， 问 个 不 同 的 问题 。 全 页 间隙 式 广告 是 否 有 效 呢 ? 

2015 年 ， 谷 歌 决定 通过 一 项 实验 来 回答 这 个 问题 。 当 谷歌 发 布 全 页 间隙 式 广告 的 实验 结果 

时 ， 答 案 很 明显 。 

。 呈现 全 页 间隙 式 广告 之 后 ， 只 有 9% 的 用 户 点 击 了 “获取 应 用 ”按钮 (要 记 住 
安装 漏斗 的 第 一 步 ) 。 

。 69% 的 用 户 在 间隙 式 广 告 打 开 之 后 就 立即 离开 了 页 面 。 这 些 用 户 既 没 有 去 应 用 商店 ， 也 
没有 通过 点 击 回 到 刚才 的 网 站 。 

看 到 这 些 数字 之 后 ， 谷 歌 决 定 再 做 一 项 实验 。 他 们 将 间隙 式 广告 替换 成 小 型 的 、 不 显眼 的 

应 用 横 条 广告 ， 然 后 观察 对 产品 实际 使 用 的 影响 。 结 果 令 人 惊讶 : 


。 移动 网 站 的 单 日 活跃 用 户 增 长 了 17%， 
。 原生 应 用 的 安装 比例 仅仅 下 降 了 2%。 


基于 这 项 实验 和 其 他 实验 的 结果 ， 谷 歌 决 定 放弃 全 页 间隙 式 广告 。2015 年 4 月， 谷歌 宣 
布 ， 使 用 全 页 间 际 式 广告 来 推广 原生 应 用 的 网 站 将 不 会 得 到 排名 的 提升 ， 其 他 移动 端 友 
好 的 网 站 则 会 提升 。 实 质 上 ， 这 意味 着 使 用 全 页 间隙 式 广 告 会 导致 网 站 的 搜索 结果 受到 影 
响 。2016 年 8 月 ， 谷 歌 采取 了 进一步 的 措施 ， 对 所 有 其 他 形式 的 间隙 式 弹 出 窗口 进行 了 额 
外 的 排名 惩罚 。 
































这 只 是 


















































注 1: 参见 谷歌 网 站 管理 员 中 心 博文 “Google+: A case study on App Download Interstitials”， 发 表 于 2015 年 
7 月 23 日 。 
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附录 C 
CORSSNO-CORS 





当 网 站 对 一 个 不 同 的 源 发 起 资源 请 求 的 时 候 ， 这 个 请 求 就 被 称 为 跨 源 请 求 (COR，cross- 
origin request)。 例 如 ， 当 地 址 为 https:/www.gothamimperial.com/ 的 页 面 尝 试 从 https:/ 
maxcdn.bootstrapcdn.com/ 加 载 样式 ， 或 者 从 https://www.google-analytics.com/ 加 载 分 析 代 
码 的 时 候 ， 就 属于 这 种 情况 。 

出 于 安全 原因 ， 浏 览 器 允许 页 面 从 不 同 的 产能 入 资源 ， 但 是 不 允许 脚本 从 另 一 个 源 读 取 
资源 内 容 。 这 就 是 所 谓 的 同 源 政策 。 舱 入 资源 〈 例 如 当 哥 谭 帝 国 酒店 使 用 <Link> 标签 从 
CDN 加 载 样式 表 ) 是 允许 的 ， 但 是 通过 发 起 Ajax 请 求 ， 从 不 同 域 的 JSON 文件 中 读 取 内 
容 ， 就 会 被 阻止 。 

开发 者 通常 会 通过 租 入 资源 代替 直接 访问 (例如 通过 JSONP) 来 绕 过 这 些 限制 ， 但 是 这 些 
只 是 在 部 分 情况 下 能 够 使 用 的 解决 方案 ， 而 且 这 样 做 会 将 浏览 器 尝试 解决 的 安全 问题 ( 主 
要 是 跨 站 脚本 攻击 ) 重新 暴露 给 用 户 。 

显然 ， 需 要 更 好 的 解决 方案 。 


跨 源 资源 共享 (CORS，cross-origin resource sharing) 是 一 个 新 的 (不 到 十 年 ) W3C 标准 ， 
用 来 定义 服务 器 和 浏览 器 之 间 的 这 些 相互 操作 。 浏 览 器 构造 请 求 以 及 服务 器 啊 应 请 求 ， 共 
同 决定 了 这 个 请 求 会 被 如 何 处 理 。 举 个 例子 ， 脚 本 可 以 配置 一 个 不 同 源 的 请 求 。 但 是 ， 要 
想 请 求 成 功 ， 服 务 器 还 需要 进行 配置 并 响应 跨 源 请 求 。 服 务 器 甚至 可 以 配置 为 只 接受 来 自 
于 某 些 来 产 的 请 求 (例如 ，www.pwabookcdn.com 可 以 配置 成 只 响应 来 源 于 www.pwabook. 
com 的 跨 源 请 求 )。 


在 脚本 中 创建 新 请 求 时 ， 你 可 以 将 模式 设置 成 以 下 值 中 的 一 个 。 
Cors 


允许 跨 源 请 求 。 这 是 新 请 求 的 默认 值 。 
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No-cors 
no-cors 这 个 命名 有 点 让 人 混淆 ， 实 际 上 它 是 允许 跨 源 请 求 的 ， 但 是 这 些 no-cors 请 求 
受到 的 限制 会 比 cors 请 求 多 。 这 些 请 求 方 法 只 能 是 HEAD、GET 或 者 POST 中 的 一 
个 。 如 果 service worker 拦截 了 这 个 请 求 ， 只 能 够 修改 头 部 信息 的 一 个 有 限 集 合 。 最 终 ， 
JavaScript 代码 不 能 够 访问 响应 的 属性 。 





same-origin 

完全 不 允许 跨 源 请 求 。 
在 第 5 章 ， 我们 必须 在 向 服务 器 请 求 脚 本 的 时 候 ， 设 置 只 接受 no-cors 请 求 。 如 果 没 有 将 
https://maps.googleapis.com 的 请 求 配置 成 no-cors 模式 ， 请 求 就 会 被 服务 器 拒绝 。 通 过 只 
允许 no-cors 请 求 ， 服 务 器 才能 确保 第 三 方 站 点 能 够 读 取 数 据 ， 但 是 同时 限制 了 其 修改 请 
求 的 能 


if (requestURL.href === googLeMapsAPIJS) { 
event.respondwith( 
fetch( 
googleMapsAPIJS+"&"+Date.now(), 
{ mode: "no-cors", cache: "no-store" } 
).catch(function() { 
return caches.match("/js/offline-map.js"); 
}) 
); 
} 
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关于 作者 


塔 勒 . 爱 特 尔 (Tal Ater) 是 一 名 拥有 20 多 年 经 验 的 开发 者 、 顾 问 和 企业 家 。 他 的 经 验 涵 
盖 了 客户 广 、 服 务 庙 、 产 品 开发 ， 以 及 研发 和 产品 部 门 的 管理 。 他 非常 热爱 并 参与 了 开源 
社区 的 工作 。 他 的 开源 贡献 包括 广 受 欢迎 的 service Worker 库 和 语音 识别 库 ， 每 天 有 数 百 万 
人 使 用 。 他 在 Web 开发 、 产 品 开发 、 安 全 和 开源 方面 广泛 著述 ， 还 发 表 过 大 量 演讲 。 他 的 
作品 和 研究 在 《福布斯 》《 纽 约 时 报 》 和 英国 广播 公司 等 媒体 上 广泛 传播 ， 让 他 的 母亲 感 
到 非常 骄傲 。 


关于 封面 

本 书 封 面 上 的 动物 是 戴 胜 (hoopoe， 学 名 Upupa epops)。 它 的 名 字 是 一 个 象声词 ， 模 拟 了 
它 的 叫喊 声 。 它 原 产 于 欧洲 、 亚 洲 、 北 非 、 搬 输 拉 以 南非 洲 、 马 达 加 斯 加 的 草地 、 稀 树 草 
原 和 林地 。 


戴 胜 是 一 种 五 颜 六 色 的 岛 ， 以 其 黄 神 色 头 顶 的 独特 栖 色 羽 冠 以 及 一 对 优雅 的 斑马 条 纹 起 膀 
而 著称 。 这 些 年 来 ， 它 的 外 表 为 其 赢得 了 许多 仰慕 者 。 在 整个 历史 上 ， 它 拥有 着 常 高 的 地 
位 。 在 古 埃及 王国 的 墙 上 和 墓碑 上 ， 印 有 戴 胜 的 描画 ， 这 个 图 像 符号 表明 这 个 孩子 是 他 父 
亲 的 继承 人 和 继任 者 。 在 波斯 ， 它 是 美德 的 象征 。 在 欧洲 ， 它 代表 了 窃贼 。 在 斯 堪 的 纳 维 
亚 ， 它 预示 着 战争 。2008 年 ， 戴 胜 被 选 为 以 色 列 的 国 鸟 。 

戴 胜 生活 在 洞穴 中 ， 会 在 树干 、 悬 崖 、 墙 壁 等 空间 中 寻找 洞穴 。 戴 胜 在 一 个 繁殖 期 内 实行 
一 夫 一 妻 制 。 雌 性 筹 卵 ， 雄 性 喂养 唆 性 。 为 了 躲避 捕食 者 ， 肉 性 会 分 汰 出 一 种 稠密 的 棕色 
液体 ， 闻 起 来 就 像 腐烂 的 内。 它 还 会 把 巩 毛 和 有 蛋 包 衷 在 这 些 腐烂 粘性 物 里 ， 让 这 个 帘 非 常 
令 人 讨厌 。 

戴 胜 主要 以 昆虫 为 食 ， 如 捕食 性 飞 蛾 的 贤 ， 这 是 一 种 破坏 性 的 森林 害虫 。 由 于 这 个 原因 ， 
戴 胜 这 个 物种 在 许多 国家 得 到 了 法 律 保护 。 

O’Reilly 封面 上 的 许多 动物 都 已 经 濒临 灭绝 ， 然 而 每 一 种 动物 对 于 地 球 都 非常 重要 。 要 想 
知道 如 何 为 保护 它们 贡献 你 的 一 份 力量 ， 请 到 animals.oreilly.com 进一步 了 解 。 

封面 图 片 来 自 Meyers Kleines Lexicon 一 书 。 
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We 


微 信 连 接 





回复 “Web 开 发 ”查看 相关 书 单 


© 
微 博 连接 
关注 @ 图 灵 教 育 每 日 分 享 |T 好 书 


全 
QQ 连接 


图 灵 读 者 官方 群 I: 218139230 
图 灵 读 者 官方 群 I[: 164939616 





图 灵 社 区 
iTuring.cn 
在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 , 图 灵 访 谈 
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PWA 开 发 实战 


渐进 式 Web 应 用 (PWA) 综合 了 原生 应 用 的 优势 以 及 Web 的 新 功能 和 优 
点 ， 同 时 规避 了 原生 应 用 的 问题 ， 能 为 用 户 提供 全 新 体验 ， 是 构建 快 
速 、 可 靠 网 站 的 利器 。 

本 书 通过 将 一 个 虚构 的 简单 网 站 逐步 改造 成 先进 的 PWA， 帮 助 读者 学 习 
如 何 利 用 曾经 专属 于 原生 应 用 的 特性 来 开发 Web 应 用 ， 使 之 能 够 快速 加 
载 、 推 送 通知 、 离 线 访问 、 拥 有 更 多 控制 权 。 


目 理解 service worker 的 工作 原理 ， 并 利用 它 创 建 在 任何 网 络 状态 
下 都 能 瞬间 启动 的 网 站 


目 创建 像 原生 应 用 一 样 可 从 手机 主屏 幕 启 动 的 全 屏 Web 应 用 
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